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

我正在使用jquery selectmenu插件显示漂亮的样式选择菜单。我有三个选择菜单，所有选项都隐藏在最后两个菜单中，当您从菜单一中选择一个选项时，它将显示菜单二中的相关选项。同样的事情发生在菜单2到3上。如果没有selectmenu插件，则可以正常工作。不幸的是，它与选择菜单插件一起消失了，并且没有重新出现。

演示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();
    });

});

无需jQuery selectmenu插件即可完全工作

演示http://jsfiddle.net/GXtpC/1526/

最佳答案

我对selectmenu()小部件不熟悉，但是我可以指出一些要注意的地方。稍微修改一下代码，似乎在调用selectmenu()之后，就不可能调用hide()了：

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

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

此外，形式上的轻微错别字也会引起

SELECT OPTION 1
SELECT OPTION 1
SELECT OPTION 3

我想应该是1,2和3？