使用jQuery UI selectmenu选择中的隐藏/显示选项

Question

I am using the jquery selectmenu plugin to display a nicely style select menu. I have three select menus, all options are hidden in the last two menus, when you select an option from menu one it shows the relevant options in menu two. The same thing happens for menu the two to three. Without the selectmenu plugin this works fine. Unfotunately with the select menu plugin it disapears and doesn't reappear.

DEMO http://jsfiddle.net/GXtpC/1525/

$(function(){            
    $('select').selectmenu({
        style:'popup'
    });

    $('.select1').on('change', function () {
        var parentId = $(this).children(":selected").attr("id");
        $('.all-opt').hide();
        $('.' + parentId).show();
    });
    $('.select2').on('change', function () {
        var parentIdReg = $(this).children(":selected").attr("data-id");
        $('.select3-option').hide();
        $('.' + parentIdReg).show();
    });

}); 

Fully working without jQuery selectmenu plugin

DEMO http://jsfiddle.net/GXtpC/1526/

Answer 1

I'm not familiar with the selectmenu() widget, but I can point point to some things to note. Modifying your code a little, it seems like after calling the selectmenu() , it makes calling hide() not possible:

$(function(){            
    $('.select1').selectmenu();
    $('.select3').selectmenu();

    $('.select2').hide();    <---- hidden
    $('.select3').hide();    <---- not hidden
/*
    $('.select1').on('change', function () {
       ...
       ...
    */
});  

Also, a slight typo in the form caused

SELECT OPTION 1
SELECT OPTION 1
SELECT OPTION 3

I suppose it should be 1,2 and 3?

Answer 2

Use the following code:

// init
var mySelect = $( "#my-select" ).selectmenu();

// hide
mySelect.selectmenu('close');
mySelect.widget().hide();

// show
mySelect.widget().show();

Answer 3

I had similar problem, which I solved calling

$( "#original_select_id" ).selectmenu( "refresh" );

I had code which removed or appended select options based on selection of other select. IE have problems with show/hide method for select options, that is why I use remove/append method instead (maybe this is required for the provided code to solve this problem).

With this code executing after the changes in the original select element was done, the jQuery UI selectmenu "reinitialized" itself and contains only options that was added / not removed on the fly.