如何从选择菜单中删除选项？答案

【问题标题】：How to remove the options from a Selectmenu?如何从选择菜单中删除选项？
【发布时间】：2017-05-03 18:46:58
【问题描述】：

我在一个 div 中有三个 selectmenu 对象。第一个与页面一起加载。当我在第一个中选择某些内容时，该值用于填充第二个。在第二个中选择会填充第三个。

在将新位放入字段之前，我需要清空旧位。

似乎没有工作 - 所以我正在做一些看起来很愚蠢的事情。没有错误消息..只是没有清空。

firstSelect = $("#first");

$.ajax({
    populate 'first'
});

secondSelect = $("#second");

firstSelect.selectmenu({
    change: function( event, data ) {
        secondSelect.empty();
        getSeconds(data.item.value);
    }
}).selectmenu("menuWidget").addClass('overflow');

thirdSelect = $("third");
secondSelect.selectmenu({
    change: function( event, data ) {
        thirdSelect.empty();
        getThirds(data.item.value);
    }
}).selectmenu( "menuWidget" ).addClass('overflow');

<body>
    <div>
        <select id='first'></select>
        <select id='second'></select>
        <select id='third'></select>
    </div>
</body>

我也试过$("#selectId").html("");

编辑：

尝试使用 $("#selectid").selectmenu("refresh") 和 $("#selectid").empty().selectmenu("refresh") - 当我尝试打开列表（单击它）时都给我这个错误：

jquery-ui.min.js:11 Uncaught TypeError: Cannot read property 'index' of undefined 在 HTMLUListElement.focus (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:11:25160) 在 t.(匿名函数).(匿名函数)._trigger (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:11090) 在 t.(匿名函数).(匿名函数).focus (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:7:27841) 在 t.(匿名函数).(匿名函数).focus (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4499) 在 t.(匿名函数).(匿名函数).open (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:11:26239) 在 t.(匿名函数).(匿名函数).open (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4499) 在 t.(匿名函数).(匿名函数)._toggle (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:11:28018) 在 t.(匿名函数).(匿名函数)._toggle (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:4499) 在 t.(匿名函数).(匿名函数).click (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:11:28578) 在 HTMLSpanElement.r (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:9786) 焦点@jquery-ui.min.js:11 _trigger@jquery-ui.min.js:6 焦点@jquery-ui.min.js:7 （匿名）@ jquery-ui.min.js:6 打开@jquery-ui.min.js:11 （匿名）@ jquery-ui.min.js:6 _toggle@jquery-ui.min.js:11 （匿名）@ jquery-ui.min.js:6 点击@jquery-ui.min.js:11 r@jquery-ui.min.js:6 调度@jquery.min.js:3 q.handle@jquery.min.js:3

【问题讨论】：

您能补充一下您尝试使用.html()时发生的情况吗？

标签： javascript jquery jquery-ui jquery-ui-selectmenu

【解决方案1】：

当您调用empty() 时，它会从底层<select> 元素中删除<option> 元素，但不会自动更新选择菜单插件。您需要使用 refresh 选项手动执行此操作，如下所示：

secondSelect.empty().selectmenu('refresh');

我还建议您遵守 jQuery 命名标准，并在包含 jQuery 对象的变量的开头放置一个 $ 字符，例如。 $firstSelect、$secondSelect 等等。

【讨论】：