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

Question

我在一个div中有三个选择菜单对象。第一个加载页面。当我在第一个文件中选择某个值时，该值用于填充第二个值。选择第二个填充第三个。

在我把新的比特放进一个字段之前，我需要清空旧的。

似乎不起作用-所以我做了件愚蠢的事。没有错误信息。只是没有排空。

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未定义的TypeError:无法在t.(匿名函数)处读取未定义at HTMLUListElement.focus (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:11:25160)的属性“index”(匿名函数)._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) at t.(匿名函数)._toggle (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:11:28018) at 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) at HTMLSpanElement.r (http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js:6:9786) focus @ jquery-ui.min.js:11 _trigger @ jquery-ui.min.js:6 focus @ jquery-ui.min.js:7 (匿名)@ jquery-ui.min.js:6 open @ jquery-ui.min.js:11 (匿名)@ jquery-ui.min.js:6 _toggle @ jquery-ui.min.js:11 (匿名)@ jquery-ui.min.js:6 click @ jquery-ui.min.js:11 r@ jquery-ui.min.js:6调度@ jquery.min.js:3 q.handle @ jquery.min.js:3

Answer 1

调用empty()时，它会从基础<select>元素中删除<option>元素，但不会自动更新selectmenu插件。您需要手动使用refresh选项，如下所示：

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

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