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

Hi all I have a dropdown as seen below:

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

<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>

how would I create the script removeElements() that would remove all of the options within the select?

如何创建删除select中所有选项的脚本removeElements（）？

5 个解决方案

#1

You didn't say on which event.Just use below on your event listener.Or in your page load

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

$('#models').empty()

Then to repopulate

然后重新填充

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

#2

You can either use .remove() on option elements:

您可以在选项元素上使用.remove（）：

.remove() : Remove the set of matched elements from the DOM.

.remove（）：从DOM中删除匹配元素集。

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

or use .empty() on select:

或者在select上使用.empty（）：

.empty() : Remove all child nodes of the set of matched elements from the DOM.

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

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

however to repopulate deleted options, you need to store the option while deleting.

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

You can also achieve the same using show/hide:

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

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

and later on to show them:

然后再向他们展示：

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

#3

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

#4

Try this

尝试这个

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

#5

In case .empty() doesn't work for you, which is for me

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

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

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

#1