blocks|key|830548|text|var+select+=+document.getElementById('yourSelectBox');

while+(select.firstChild)+{
++++select.removeChild(select.firstChild);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|830549|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('yourSelectBox');

while (select.firstChild) {
    select.removeChild(select.firstChild);
}
</code></pre>


blocks|key|1045487|text|document.getElementById('id').options.length+=+0;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1045488|或|unstyled|1045489|document.getElementById('id').innerHTML+=+"";|1045490|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>document.getElementById('id').options.length = 0;
</code></pre>

<p>or</p>

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


blocks|key|1045516|text|<select+id="thing"><option>fdsjl</option></select>
<script>
var+el+=+document.getElementById('thing');
el.innerHTML+=+'';

//+or+this

while+(+el.firstChild+)+{
+++el.removeChild(+el.firstChild+)
}
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1045517|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>&lt;select id="thing"&gt;&lt;option&gt;fdsjl&lt;/option&gt;&lt;/select&gt;
&lt;script&gt;
var el = document.getElementById('thing');
el.innerHTML = '';

// or this

while ( el.firstChild ) {
   el.removeChild( el.firstChild )
}
&lt;/script&gt;
</code></pre>


blocks|key|830628|text|使用JavaScript和DOM非常容易：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|830629|while+(selectBox.firstChild)
++++selectBox.removeChild(selectBox.firstChild);|code-block|syntax|javascript|830630|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|$]]

<p>Its very easy using JavaScript and DOM:</p>

<pre><code>while (selectBox.firstChild)
    selectBox.removeChild(selectBox.firstChild);
</code></pre>


blocks|key|830685|text|将length设置为0可能是最好的方法，但也可以这样做：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|830686|var+mySelect+=+document.getElementById("select");
var+len+=+mySelect.length;
for+(var+i+=+0;+i+<+len;+i%2B%2B)+{
++++mySelect.remove(0);
}|code-block|syntax|javascript|830687|entityMap^0|1|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Setting the <code>length</code> to 0 is probably the best way, but you can also do this:</p>

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


blocks|key|830735|text|我所能找到的最快的解决方案是下面的代码(取自这个article)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|830736|//+Fast+javascript+function+to+clear+all+the+options+in+an+HTML+select+element
//+Provide+the+id+of+the+select+element
//+References+to+the+old+<select>+object+will+become+invalidated!
//+This+function+returns+a+reference+to+the+new+select+object.
function+ClearOptionsFast(id)
{
++++var+selectObj+=+document.getElementById(id);
++++var+selectParentNode+=+selectObj.parentNode;
++++var+newSelectObj+=+selectObj.cloneNode(false);+//+Make+a+shallow+copy
++++selectParentNode.replaceChild(newSelectObj,+selectObj);
++++return+newSelectObj;
}|code-block|syntax|javascript|830737|entityMap|0|LINK|mutability|MUTABLE|url|http://www.somacon.com/p542.php^0|O|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>The fastest solution I was able to find is the following code (taken from this <a href="http://www.somacon.com/p542.php" rel="nofollow noreferrer">article</a>):</p>

<pre><code>// Fast javascript function to clear all the options in an HTML select element
// Provide the id of the select element
// References to the old &lt;select&gt; object will become invalidated!
// This function returns a reference to the new select object.
function ClearOptionsFast(id)
{
    var selectObj = document.getElementById(id);
    var selectParentNode = selectObj.parentNode;
    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelectObj, selectObj);
    return newSelectObj;
}
</code></pre>


blocks|key|830808|text|有一种简单而优雅的方法可以做到这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|830809|for(var+o+of+document.querySelectorAll('#id+>+option'))+{
++o.remove()
}|code-block|syntax|javascript|830810|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|$]]

<p>There is simple and elegant way to do this:</p>

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


<p>How can i dynamically remove all options of a drop down box in javascript?</p>


removing all option of dropdown box in javascript

如何在javascript中动态删除下拉框中的所有选项？

问删除javascript中下拉框的所有选项
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问删除javascript中下拉框的所有选项EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问删除javascript中下拉框的所有选项
EN