Question

我正在使用jquery selectmenu插件来显示一个很好的样式选择菜单。我有三个选择菜单，所有选项都隐藏在最后两个菜单中，当您从菜单1中选择一个选项时，它会在菜单2中显示相关选项。两到三个菜单也会发生同样的事情。如果没有selectmenu插件，这可以正常工作。不幸的是，使用选择菜单插件，它会消失，并且不会重新出现。

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

});

没有jQuery selectmenu插件完全正常工作

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

Answer 1

我不熟悉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？

Answer 2

使用以下代码：

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

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

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

Answer 3

我有类似的问题，我解决了这个问题

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

我的代码根据其他选择的选择删除或追加了选项。 IE在选择选项的show / hide方法方面存在问题，这就是我使用remove / append方法的原因（也许这是提供的代码解决这个问题所必需的。）

在完成原始select元素的更改后执行此代码时，jQuery UI selectmenu“重新初始化”自身，并且仅包含动态添加/未删除的选项。

使用jQuery UI selectmenu在select中隐藏/显示选项

3 个答案: