1

I got 2 selectpickers on my page. I want to be able to open (slide down) 2nd selectpicker when user has selected something in first one. This is done to help user not to click too much.

Example HTML:

<div class="row">
    <select class="select-picker" id="picker1" data-size="10">
        <option>Opt 1</option>
        <option>Opt 2</option>
        <option>Opt 3</option>
        <option>Opt 4</option>
    </select>

    <select class="select-picker" id="picker2" data-size="10">
        <option>Opt 2.1</option>
        <option>Opt 2.2</option>
        <option>Opt 2.3</option>
        <option>Opt 2.4</option>
    </select>
</div>

Example of JS:

$(document).ready(function() {
    $('.select-picker').selectpicker();

    $('.select-picker').change(function(){
        // Trying to open 2nd selectpicker
        $selectpickerButton = $('button[data-id="picker2"]');
        $selectpicker = $selectpickerButton.parent();

       //$selectpicker.addClass('open');
        $selectpickerButton.click();
    });
});

And here's JSBin: http://jsbin.com/UFoRIYex/514/edit

And Fiddle: http://jsfiddle.net/u6vWL/46/

Andrew
  • 1,963
  • 3
  • 25
  • 35
WhiteAngel
  • 2,594
  • 2
  • 21
  • 35
  • This has been asked before, and is unfortunately not possible. – Andrew Apr 24 '14 at 15:22
  • possible duplicate of [Can I open a dropdownlist using jQuery](http://stackoverflow.com/questions/360431/can-i-open-a-dropdownlist-using-jquery) – Andrew Apr 24 '14 at 15:23
  • Unfortuantely, this is not the duplicate of the topic you've specified. I got issues with the concrete realisation of Bootstrap selectpicker library. As soon as I debug step by step the process - I can see that 2nd select-picker is bein expanded successfully but after that some 'refresh' or something else is being done and both of them are being closed. – WhiteAngel May 22 '14 at 11:34

1 Answers1

2

The following worked, it is a little dirty but hey!!

UPDATED ANSWER

I used same answer as before, but now i set a time out and call a function after timeout is done:

    $('.select-picker').selectpicker();
var selectpickerButton = $('button[data-id="picker2"]');


$(document).on("change", "#picker1", function () {
    setTimeout(function () {
        // Do something after xx milli seconds
        youSelected();
    }, 100);
});

function youSelected() {
    $(selectpickerButton).trigger('click');

}

jSFiddle

HenryW
  • 3,551
  • 1
  • 23
  • 23
  • I've just tried your solution and it really seems to open 2nd dropdrown but the problem is that the value of dropdown is not changing no matter what option you select. Updated JSBin is here: http://jsbin.com/UFoRIYex/797/edit – WhiteAngel Aug 29 '14 at 08:20
  • 1
    you can also remove the function in the on.change and directly tell to `$(selectpickerButton).trigger('click');` can see here: [jsFiddle](http://jsfiddle.net/u6vWL/88/) – HenryW Aug 29 '14 at 17:35