如何使用jQuery/JavaScript从下拉列表中删除所有选项

Question

我有一个下拉列表,如下所示:

<select id="models" onchange="removeElements()">
            <option id = "remove" value="0">R8</option>
            <option id = "remove" value="1">Quattro</option>
            <option id = "remove" value="2">A6 hatchback</option>
</select>

如何创建removeElements()将删除选择中的所有选项的脚本？

Answer 1

你没有说明在哪个事件上.只需在你的事件监听器上使用.或者在你的页面加载中

$('#models').empty()

然后重新填充

$.getJSON('@Url.Action("YourAction","YourController")',function(data){
 var dropdown=$('#models');
dropdown.empty();  
$.each(data, function (index, item) {
    dropdown.append(
        $('<option>', {
            value: item.valueField,
            text: item.DisplayField
        }, '</option>'))
      }
     )});

Answer 2

您可以在选项元素上使用.remove():

.remove():从DOM中删除匹配元素集.

 $('#models option').remove(); or $('#models').remove('option');

或者在select上使用.empty():

.empty():从DOM中删除匹配元素集的所有子节点.

 $('#models').empty();

但是要重新填充已删除的选项,您需要在删除时存储该选项.

您还可以使用show/hide实现相同的功能:

$("#models option").hide();

然后向他们展示:

$("#models option").show();