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>

如何创建将删除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();

Answer 3

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

Answer 4

试试这个

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

Answer 5

如果.empty（）不适合你，那对我来说是

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

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

Answer 6

任何使用JavaScript（而不是JQuery）的人，都可能想尝试此解决方案，其中“模型”是包含列表的选择字段的ID：-

period

Answer 7

香草JavaScript的其他方法：

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

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

7 个答案: