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

我有一个下拉列表，如下所示：

<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以删除select中的所有选项？

您没有说明是哪个事件。只需在事件侦听器上或页面加载中使用下面的命令即可

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

您可以在选项元素上使用：

.remove：从DOM中删除匹配的元素集

或用于选择：

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

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

也可以使用“显示/隐藏”来实现相同的效果：

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

然后向他们展示：

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

试试这个

function removeElements(){
    $('#models').html("");
}

---

以防万一，空的不适合你，也不适合我

function SetDropDownToEmpty() 
{           
$('#dropdown').find('option').remove().end().append('<option value="0"></option>');
$("#dropdown").trigger("liszt:updated");          
}

$(document).ready(
SetDropDownToEmpty() ;
)

---

任何使用JavaScript而不是JQuery的人都可能希望尝试此解决方案，其中“models”是包含列表的select字段的ID：-

var DDlist = document.getElementById("models");
while(DDlist.length>0){DDlist.remove(0);}

---

香草JavaScript的其他方法：

for(var o of document.querySelectorAll('#models > option')) {
  o.remove()
}

---

您知道id部分应该有一个唯一的名称，而不是像您的选项标记那样。重复-普通JS:document.getElementById'models'。length=0为我这样做。如果您已经有了对select的引用，然后select.length=0请参见。运行此方法后，我是否可以重新填充模型选择？我需要清空更改内容并重新填充下拉列表否在我清除选择框后，我打算进行ajax调用，然后重新填充下拉列表OK谢谢-我遇到了一个问题，甚至在更改函数时触发了该函数。如果您只是想怎么办有条件地从下拉列表中删除几个选项。例如，一天中的时间下拉列表，不显示当前时间之前的时间。

function SetDropDownToEmpty() 
{           
$('#dropdown').find('option').remove().end().append('<option value="0"></option>');
$("#dropdown").trigger("liszt:updated");          
}

$(document).ready(
SetDropDownToEmpty() ;
)

var DDlist = document.getElementById("models");
while(DDlist.length>0){DDlist.remove(0);}

for(var o of document.querySelectorAll('#models > option')) {
  o.remove()
}