Using chained selects with jQuery UI selectmenu

Question

I'm trying to use chained selects ( http://www.appelsiini.net/projects/chained ) with select menus that are being rendered with jQuery UI's selectmenu.

I'm having a problem that when an option is selected in the initial UI rendered select it doesn't appear to be actually changing the underlying select menu, which means that the second chained select isn't updating.

JSFiddle here: http://jsfiddle.net/5kty2wsa/2

My JavaScript:

$("#choose-channel-2").chained('#choose-channel')
$("#choose-channel").selectmenu();
$("#choose-channel-2").selectmenu();

My HTML:

<select id="choose-channel" name="accounts">
  <option value="">Select...</option>
  <option value="0">Option 1</option>
  <option value="1">Option 2</option>
  <option value="2">Option 3</option>
</select>
<select id="choose-channel-2" name="searches">
  <option value="">Select...</option>
  <option class="0">Result 1a</option>
  <option class="0">Result 1b</option>
  <option class="1">Result 2a</option>
  <option class="1">Result 2b</option>
  <option class="2">Result 3a</option>
  <option class="2">Result 3b</option>
</select>

Commenting out the two selectmenu js lines shows that the chained selects are working as expected without selectmenu.

I'm sure someone must have across this issue before, but I'm struggling to find any examples of how to work with it.

Answer 1

I am having the same issue, definitely frustrating. For now if all you want is the look and feel of the jQuery UI ( Fiddle Example ):

Edit your CSS:

select { width: 250px; padding: 3px 0px; }

Edit Javascript:

$("select").addClass("ui-selectmenu-button ui-widget ui-state-default ui-corner-all");

About the .selectmenu()

The .selectmenu() does have a "refresh" ( jQuery UI selectmenu ) method - which sort-of works; in a decaying manner. The fact is that the .selectmenu() only knows about the select options available once its been created. As you continue to refresh .selectmenu() it knows about less and less options because they don't exist anymore.

The .selectmenu() must re-initialize its build based on the new selected option. This is where I get stumped. I have tried several variations of trying to re-initialize the .selectmenu() to capture the original element options in order to build the new list, but have been unable to do so. Like so:

//Initialize
$("#choose-channel-2").chained('#choose-channel');
$("select").selectmenu();

//Test 1 to refresh only    
$( "select" ).on( "selectmenuchange", function( event, ui ) {
  $("#choose-channel-2").chained('#choose-channel');
  $(this).selectmenu("refresh");
});

//Test 2 to destroy and re-initilize
$( "select" ).on( "selectmenuchange", function( event, ui ) {
  $("select").selectmenu("destroy");
  $("#choose-channel-2").chained('#choose-channel');
  $("select").selectmenu();
});

Answer 2

Might be too late for you, but not others..I have figured this out. You were very close to the solution. The problem was that the jQueryUI selectmenu wasn't triggering a "change" event on the select field.

        //Enable chained selects
        $("#issue").chained("#area");

        //Hack: Update select if options change
        $( "select" ).on( "selectmenuchange", function( event, ui ) {

            //Trigger change event on select field so chained menus update
            $(this).closest("select").trigger("change");

            //Refresh all select menus
            $( "select" ).selectmenu("refresh");

        } );