blocks|key|971466|text|您可以使用以下命令清除所有元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|971467|var+select+=+document.getElementById("DropList");
var+length+=+select.options.length;
for+(i+=+length-1;+i+>=+0;+i--)+{
++select.options[i]+=+null;
}|code-block|syntax|javascript|971468|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can use the following to clear all the elements.

<pre><code>var select = document.getElementById("DropList");
var length = select.options.length;
for (i = length-1; i &gt;= 0; i--) {
 select.options[i] = null;
}
</code></pre>

blocks|key|1185888|text|要删除select的HTML元素的选项，可以使用remove()方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1185889|function+removeOptions(selectElement)+{
+++var+i,+L+=+selectElement.options.length+-+1;
+++for(i+=+L;+i+>=+0;+i--)+{
++++++selectElement.remove(i);
+++}
}

//+using+the+function:
removeOptions(document.getElementById('DropList'));|code-block|syntax|javascript|1185890|向后删除options非常重要；因为remove()方法会重新排列options集合。这样，就可以保证要删除的元素仍然存在！|1185891|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement|1|https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/remove|2|https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/options^0|3|6|O|8|3|6|0|O|8|1|0|0|4|7|I|8|X|7|4|7|2|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]|$9|16|A|17|1|18]]|E|$]]|$1|F|3|G|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|M|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]|W|$5|P|Q|R|E|$S|X]]]]

To remove the options of an HTML element of <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement" rel="noreferrer"><code>select</code></a>, you can utilize the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/remove" rel="noreferrer"><code>remove()</code></a> method:

<pre><code>function removeOptions(selectElement) {
 var i, L = selectElement.options.length - 1;
 for(i = L; i &gt;= 0; i--) {
 selectElement.remove(i);
 }
}

// using the function:
removeOptions(document.getElementById('DropList'));
</code></pre>

It's important to remove the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/options" rel="noreferrer"><code>options</code></a> backwards; as the <code>remove()</code> method rearranges the <code>options</code> collection. This way, it's guaranteed that the element to be removed still exists!

blocks|key|971656|text|如果你希望有一个轻量级的脚本，那就去找jQuery吧。在jQuery中，删除所有选项的解决方案如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|971657|$("#droplist").empty();|code-block|syntax|javascript|971658|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you wish to have a lightweight script, then go for jQuery. 
In jQuery, the solution for removing all options will be like: 

<pre><code>$("#droplist").empty();
</code></pre>

blocks|key|1186141|text|也许，这不是最干净的解决方案，但它绝对比逐个删除简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1186142|document.getElementById("DropList").innerHTML+=+"";|code-block|syntax|javascript|1186143|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Probably, not the cleanest solution, but it is definitely simpler than removing one-by-one:

<pre><code>document.getElementById("DropList").innerHTML = "";
</code></pre>

blocks|key|971736|text|这是最好的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|971737|function+(comboBox)+{
++++while+(comboBox.options.length+>+0)+{++++++++++++++++
++++++++comboBox.remove(0);
++++}++++++++
}|code-block|syntax|javascript|971738|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is the best way :

<pre><code>function (comboBox) {
 while (comboBox.options.length &gt; 0) { 
 comboBox.remove(0);
 } 
}
</code></pre>

blocks|key|1186473|text|这是一条捷径：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1186474|document.getElementById('mySelect').innerText+=+null;|code-block|syntax|javascript|1186475|一行，没有for，没有JQuery，很简单。|1186476|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is a short way:
<pre><code>document.getElementById('mySelect').innerText = null;
</code></pre>
One line, no for, no JQuery, simple.

blocks|key|1186609|text|我想指出的是，原来问题中的问题今天已经不再相关了。这个解决方案还有一个更短的版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1186610|selectElement.length+=+0;|code-block|syntax|javascript|1186611|我已经测试了这两个版本在火狐52，Chrome49，Opera36，Safari5.1，IE+11，Edge18，最新版本的Chrome，火狐，三星互联网和安卓上的UC浏览器，iPhone+6S上的Safari，安卓4.2.2的普通浏览器上都能运行。我认为可以得出这样的结论:它与现在的任何设备都是完全兼容的，所以我推荐这种方法。|1186612|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I'd like to point out that the problem in the original question is not relevant today anymore. And there is even shorter version of that solution:

<pre><code>selectElement.length = 0;
</code></pre>

I've tested that both versions work in Firefox 52, Chrome 49, Opera 36, Safari 5.1, IE 11, Edge 18, latest versions of Chrome, Firefox, Samsung Internet and UC Browser on Android, Safari on iPhone 6S, Android 4.2.2 stock browser. I think it is safe to conclude that it's absolutely compatible with whatever device there is right now, so I recommend this approach.

blocks|key|1186558|text|这有点现代和纯粹的JavaScript|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1186559|document.querySelectorAll('#selectId+option').forEach(option+=>+option.remove())|code-block|syntax|javascript|1186560|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is a bit modern and pure JavaScript

<pre class="lang-js prettyprint-override"><code>document.querySelectorAll('#selectId option').forEach(option =&gt; option.remove())
</code></pre>

blocks|key|1186045|text|function+removeOptions(obj)+{
++++while+(obj.options.length)+{
++++++++obj.remove(0);
++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1186046|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function removeOptions(obj) {
 while (obj.options.length) {
 obj.remove(0);
 }
}
</code></pre>

blocks|key|971611|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|971612|document.getElementsByTagName("Option").length=0|code-block|syntax|javascript|971613|或者可以研究一下removeChild()函数。|971614|或者如果你使用jQuery框架。|971615|$("DropList+Option").each(function(){$(this).remove();});|971616|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Try

<pre><code>document.getElementsByTagName("Option").length=0
</code></pre>

Or maybe look into the removeChild() function.

Or if you use jQuery framework.

<pre><code>$("DropList Option").each(function(){$(this).remove();});
</code></pre>

blocks|key|1186343|text|请注意，select可以同时具有这两个属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1186344|optgroup+&options集合|1186345|作为它的孩子。|1186346|所以,|1186347|方法#1|1186348|var+selectElement+=+document.getElementById('myselectid');
selectElement.innerHTML+=+'';|code-block|syntax|javascript|1186349|方法#2|1186350|var+selectElement+=+document.getElementById('myselectid');
selectElement.textContent+=+'';|1186351|我测试过，两者都能在Chrome上工作。|1186352|我喜欢更简单，老式的方法#1。|1186353|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

Note that a select can have both 
- optgroup &amp; 
- options collection 
 as its children. 

So,

Method #1

<pre><code>var selectElement = document.getElementById('myselectid');
selectElement.innerHTML = '';
</code></pre>

Method #2

<pre><code>var selectElement = document.getElementById('myselectid');
selectElement.textContent = '';
</code></pre>

I tested, both work on Chrome. 
I like the simpler, the old fashioned, method #1.

blocks|key|971971|text|如果您使用的是JQuery，并且您的select控件的ID为"DropList“，则可以通过以下方式删除其选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|971972|$('#DropList+option').remove();|code-block|syntax|javascript|971973|实际上，它适用于任何选项列表，如datalist。|971974|希望能有所帮助。|971975|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you are using JQuery and your select control has ID "DropList" you can remove its options doing this way:

<pre><code>$('#DropList option').remove();
</code></pre>

Actually it works for me with any option list, like datalist. 

Hope it helps.

blocks|key|971922|text|使用JQuery是一种更漂亮、更短、更聪明的方式！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|971923|$('#selection_box_id').empty();|code-block|syntax|javascript|971924|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Using JQuery is a prettier, shorter &amp; smarter way to do it!

<pre><code>$('#selection_box_id').empty();
</code></pre>

blocks|key|1186235|text|倒车。原因是每次删除后大小都会减小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1186236|for+(i+=+(len-1);+i+>+-1;+i--)+{
++++document.getElementById("elementId").remove(i);
}|code-block|syntax|javascript|1186237|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Go reverse. Reason is size decreases after each remove.

<pre><code>for (i = (len-1); i &gt; -1; i--) {
 document.getElementById("elementId").remove(i);
}
</code></pre>

blocks|key|972089|text|这可用于清除选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|972090|​|972091|function+clearDropDown(){
++var+select+=+document.getElementById("DropList"),
++++++length+=+select.options.length;
++while(length--){
++++select.remove(length);
++}
}|code-block|syntax|javascript|972092|<select+id="DropList"+>
++<option>option_1</option>
++<option>option_2</option>
++<option>option_3</option>
++<option>option_4</option>
++<option>option_5</option>
</select>
<button+onclick="clearDropDown()">clear+list</button>|972093|972094|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

This can be used to clear options:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function clearDropDown(){
 var select = document.getElementById("DropList"),
 length = select.options.length;
 while(length--){
 select.remove(length);
 }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="DropList" &gt;
 &lt;option&gt;option_1&lt;/option&gt;
 &lt;option&gt;option_2&lt;/option&gt;
 &lt;option&gt;option_3&lt;/option&gt;
 &lt;option&gt;option_4&lt;/option&gt;
 &lt;option&gt;option_5&lt;/option&gt;
&lt;/select&gt;
&lt;button onclick="clearDropDown()"&gt;clear list&lt;/button&gt;</code></pre>
</div>
</div>

blocks|key|972488|text|var+select+=+document.getElementById("DropList");
var+length+=+select.options.length;
for+(i+=+0;+i+<+length;+i%2B%2B)+{
++select.options[i].remove();
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|972489|希望这段代码能帮助你|unstyled|972490|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>var select = document.getElementById("DropList");
var length = select.options.length;
for (i = 0; i &lt; length; i++) {
 select.options[i].remove();
}
</code></pre>

Hope, this code will helps you

blocks|key|971843|text|var+select+=+document.getElementById('/*id+attribute+of+your+select+here*/');
for+(var+option+in+select){
++++select.remove(option);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|971844|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var select = document.getElementById('/*id attribute of your select here*/');
for (var option in select){
 select.remove(option);
}
</code></pre>

blocks|key|972251|text|应反向删除这些项，否则将导致错误。此外，我不建议简单地将值设置为null，因为这可能会导致意外的行为。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|972252|var+select+=+document.getElementById("myselect");
for+(var+i+=+select.options.length+-+1+;+i+>=+0+;+i--)
++++select.remove(i);|code-block|syntax|javascript|972253|或者，如果你愿意，你可以把它变成一个函数：|972254|function+clearOptions(id)
{
++++var+select+=+document.getElementById(id);
++++for+(var+i+=+select.options.length+-+1+;+i+>=+0+;+i--)
++++++++select.remove(i);
}
clearOptions("myselect");|972255|entityMap^0|W|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

The items should be removed in reverse, otherwise it will cause an error. Also, I do not recommended simply setting the values to <code>null</code>, as that may cause unexpected behaviour.

<pre><code>var select = document.getElementById("myselect");
for (var i = select.options.length - 1 ; i &gt;= 0 ; i--)
 select.remove(i);
</code></pre>

Or if you prefer, you can make it a function:

<pre><code>function clearOptions(id)
{
 var select = document.getElementById(id);
 for (var i = select.options.length - 1 ; i &gt;= 0 ; i--)
 select.remove(i);
}
clearOptions("myselect");
</code></pre>

blocks|key|1186782|text|对于Vanilla+JavaScript来说，有一种简单而优雅的方法可以做到这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1186783|for(var+o+of+document.querySelectorAll('#DropList+>+option'))+{
++o.remove()
}|code-block|syntax|javascript|1186784|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For Vanilla JavaScript there is simple and elegant way to do this:

<pre><code>for(var o of document.querySelectorAll('#DropList &gt; option')) {
 o.remove()
}
</code></pre>

blocks|key|1186284|text|以上答案的代码需要稍微修改一下才能完整删除列表，请检查这段代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1186285|var+select+=+document.getElementById("DropList");
var+length+=+select.options.length;
for+(i+=+0;+i+<+length;)+{
++select.options[i]+=+null;
++length+=+select.options.length;
}|code-block|syntax|javascript|1186286|刷新长度，它将从下拉列表中删除所有数据。希望这能帮助到一些人。|1186287|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Above answer's code need a slight change to remove the list complete, please check this piece of code.

<pre><code>var select = document.getElementById("DropList");
var length = select.options.length;
for (i = 0; i &lt; length;) {
 select.options[i] = null;
 length = select.options.length;
}
</code></pre>

refresh the length and it will remove all the data from drop down list. 
Hope this will help someone.

blocks|key|972148|text|最简单的解决方案就是最好的，所以你只需要：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|972149|​|972150|var+list+=+document.getElementById('list');
while+(list.firstChild)+{
++++list.removeChild(list.firstChild);
}|code-block|syntax|javascript|972151|<select+id="list">
++<option+value="0">0</option>
++<option+value="1">1</option>
</select>|972152|972153|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

The simplest solutions are the best, so You just need:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var list = document.getElementById('list');
while (list.firstChild) {
 list.removeChild(list.firstChild);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="list"&gt;
 &lt;option value="0"&gt;0&lt;/option&gt;
 &lt;option value="1"&gt;1&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>

blocks|key|971837|text|while(document.getElementById("DropList").childNodes.length>0)+
{
++++document.getElementById("DropList").removeChild(document.getElementById("DropList").childNodes[0]);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|971838|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>while(document.getElementById("DropList").childNodes.length&gt;0) 
{
 document.getElementById("DropList").removeChild(document.getElementById("DropList").childNodes[0]);
}
</code></pre>

blocks|key|1186190|text|如果你必须支持IE，并且你的选择列表中有超过100个项目，我强烈建议你考虑用如下所示的函数替换select：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1186191|function+clearOptions(select)+{
++++var+selectParentNode+=+select.parentNode;
++++var+newSelect+=+select.cloneNode(false);+//+Make+a+shallow+copy
++++selectParentNode.replaceChild(newSelect,+select);
++++return+newSelect;
}|code-block|syntax|javascript|1186192|select参数应该是来自jquery选择器或document.getElementBy调用的元素。这样做的唯一缺点是您丢失了连接到select的事件，但当它从函数返回时，您可以很容易地重新附加它们。我正在处理一个有大约3k个项目的select，在IE9上需要4秒钟才能清除select，这样我就可以用新内容更新它。这样做几乎是瞬间完成的。|1186193|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If you have to support IE and you have more than 100 items in your select list, I strongly recommend you consider replacing the select with a function like so:

<pre><code>function clearOptions(select) {
 var selectParentNode = select.parentNode;
 var newSelect = select.cloneNode(false); // Make a shallow copy
 selectParentNode.replaceChild(newSelect, select);
 return newSelect;
}
</code></pre>

The select parameter should be the element either from a jquery selector or document.getElementBy call. The only downside to this is that you lose events you had wired up to the select, but you can easily reattach them as it is returned back out of the function. I was working with a select that had ~3k items and it would take 4 seconds on IE9 to clear the select so I could update it with the new content. Nearly instant doing it this way.

blocks|key|1186840|text|for+(var+opt+of+document.querySelectorAll('#DropList+option'))
{+
++opt.remove();
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1186841|此解决方案也适用于optgroups。|unstyled|1186842|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>for (var opt of document.querySelectorAll('#DropList option'))
{ 
 opt.remove();
}
</code></pre>
This solution works with optgroups also.

blocks|key|1186438|text|今天我也遇到了同样的问题，当我重新加载选择框时，我这样做了。(在Plain+JS中)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1186439|++++++++var+select+=+document.getElementById("item");
++++++++select.options.length+=+0;
++++++++var+opt+=+document.createElement('option');
++++++++opt.value+=+0;
++++++++opt.innerHTML+=+"Select+Item+...";
++++++++opt.selected+=+"selected";
++++++++select.appendChild(opt);


+++++++for+(var+key+in+lands)+{
++++++++++++var+opt+=+document.createElement('option');
++++++++++++opt.value+=+lands[key].id;
++++++++++++opt.innerHTML+=+lands[key].surveyNo;
++++++++++++select.appendChild(opt);

++++++++}|code-block|syntax|javascript|1186440|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Today I was facing same problem, I did as below while reloading select box. (In Plain JS)

<pre><code> var select = document.getElementById("item");
 select.options.length = 0;
 var opt = document.createElement('option');
 opt.value = 0;
 opt.innerHTML = "Select Item ...";
 opt.selected = "selected";
 select.appendChild(opt);


 for (var key in lands) {
 var opt = document.createElement('option');
 opt.value = lands[key].id;
 opt.innerHTML = lands[key].surveyNo;
 select.appendChild(opt);

 }
</code></pre>

My code works in IE but breaks in Safari, Firefox, and Opera. (big surprise)

<pre><code>document.getElementById("DropList").options.length=0;
</code></pre>

After searching, I've learned that it's the <code>length=0</code> that it doesn't like. 
I've tried <code>...options=null</code> and <code>var clear=0; ...length=clear</code> with the same result.

I am doing this to multiple objects at a time, so I am looking for some lightweight JS code.

How do I clear all options in a dropdown box?

jQuery

我的代码在IE中可以工作，但在Safari、Firefox和Opera中会崩溃。(大惊喜)document.getElementById("DropList").options.length=0;经过搜索，我发现它不喜欢的是length=0。我试过...options=null和var clear=0; ...length=clear，结果是一样的。我一次对多个对象执行此操作，因此我正在寻找一些轻

问如何清除下拉框中的所有选项？
EN

回答 25

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何清除下拉框中的所有选项？EN

回答 25

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何清除下拉框中的所有选项？
EN