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

hide/show option in select using jQuery UI selectmenu

本文关键字：选择 显示 选项 隐藏 jQuery 菜单 使用 UI      更新时间：2023-09-26

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

演示 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选择菜单插件即可完全工作

演示 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？

我有类似的问题，我解决了调用

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

我有代码根据其他选择的选择删除或附加选择选项。IE在选择选项的显示/隐藏方法方面存在问题，这就是为什么我改用删除/附加方法的原因（也许这是提供的代码来解决此问题所必需的）。

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

使用以下代码：

// init
var mySelect = $( "#my-select" ).selectmenu();
// hide
mySelect.selectmenu('close');
mySelect.widget().hide();
// show
mySelect.widget().show();
相关文章：