javascript - 如何重置按钮的 div onclick 内的所有选择框？

Question

以我的形式

<div class="container">
    <select name="sel1">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <select name="sel2">
        <option value="0">Zero</option>
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>
</div>
<input type="button" onclick="resetAll()" value="Reset"/>

我需要将sel1、sel2都重置为默认值。即selectedIndex = 0;

function resetAll()
{
     //what should i write here to do this
}    

我有 20 多个选择框。有什么帮助吗？

Answer 1

试试这个，这应该适用于任何数量drop downs

function resetAll()
{
    var selects = document.getElementsByTagName('select');
    var len = selects.length;
    for(var i=0; i<len; i++){
        selects[i].selectedIndex=0;
    }
}

演示：http: //jsfiddle.net/LAaRv/1/

更新：

如果您只想重置“sel1”和“sel2”，那么试试这个，

function resetAll()
{
    var selects = document.getElementsByTagName('select');
    var len = selects.length;
    for(var i=0; i<len; i++){
        if(selects[i].name == "sel1" || selects[i].name == "sel2"){
           selects[i].selectedIndex=0;
        }
    }
} ​

​</p>

Answer 2

只需向容器项添加一个 id，以便您可以轻松引用它。这样，您只重置驻留在其中的选择框，而不是您可能在页面上拥有的任何其他选择框：

function resetAll() {
    var container = document.getElementById('container');
    var children = container.getElementsByTagName('select');
    for (var i = 0; i < children.length; i++) {
        children[i].selectedIndex = 0;
    }
}

Answer 3

只需不使用任何 for 循环 -

对于第一个索引 -

 $("select").each(function() { this.selectedIndex = 0 });

对于空选择 -

 $("select").each(function() { this.selectedIndex = -1 });

PLUNKER EXAMPLE

Answer 4

试试这个

var secondCombo = document.getElementsByName("sel1")[0];
secondCombo.value = 0;