单击按钮清除填充的下拉列表

Question

I have a drop-down list which gets populated dynamically . I have a button which has to clear the drop-down list whenever the user wishes to.

test.html

<select id="test">
<option></option>
</select>
<input type="button" id="refresh" />

here my select tag is populated dynamically. Once I click on the refresh button the populated values should be cleared. How do i proceed?

Answer 1

Use the following code.

$('#refresh').click(function(e)
{
    $('#test').empty();
});

Answer 2

Uee following

$('#refresh').click(function()
{
  $("#test").html("");
});

Means Expty HTML inside dropdown on click.

Check here Șhȇkhaṝ's answer .html("") is much faster than empty() . here

Answer 3

这将清除下拉值：

document.getElementById(‘drpFruits’).options.length=0;

Answer 4

Try the following:

document.getElementById('refresh').addEventListener('click', function () {
    document.getElementById('test').innerHTML = '';
});

No jQuery, clean native javascript code.

Working fiddle .

Answer 5

var refreshBtn = document.getElementById("refresh");     
refreshBtn.addEventListener('click', function(event) {
document.getElementById("test").options.length = 0;
}