logo标签列表

重置所有下拉选择框

javascriptjquery
10

我有一个由onbeforeunload调用的函数。 我希望在其中重置所有下拉框，但我找不到将它们恢复为0值的正确方法。

<head>
    <script type="text/javascript">
        function displaymessage() {
            document.getElementsByTagName('select').value = 1;
            //or
            document.getElementsByTagName('select').options.length = 0;
        }
    </script>
</head>

<body>
    <form>
        <input type="button" value="Click me!" onclick="displaymessage()" />
    </form>

    <select name="data[Rate][15][12][num_rooms]" id="r15ro12">
        <option value="0">0</option><option value="1">1 Rooms</option>
        <option value="2">2 Rooms</option><option value="3">3 Rooms</option><option value="4">4 Rooms</option>
        <option value="5">5 Rooms</option><option value="6">6 Rooms</option><option value="7">7 Rooms</option>
        <option value="8">8 Rooms</option><option value="9">9 Rooms</option>
    </select>

    <select name="data[Rate][15][12][num_rooms]" id="r15ro12">
        <option value="0">0</option><option value="1">1 Rooms</option>
        <option value="2">2 Rooms</option><option value="3">3 Rooms</option><option value="4">4 Rooms</option>
        <option value="5">5 Rooms</option><option value="6">6 Rooms</option><option value="7">7 Rooms</option>
        <option value="8">8 Rooms</option><option value="9">9 Rooms</option>
    </select>
</body>
</html>
1
您不应该有与 #r15ro12 相同的 name 或 id 的多个元素，所有的表单元素（input、select 等）都应该在 form 中。 - Stefan
我只是举了一个快速复制粘贴的例子，我的代码中没有这个，感谢反馈，干杯 - Keith Power
好的，太棒了！我也想知道为什么有人希望在“卸载”时重置选择？（假设您正在关闭弹出窗口） - Stefan
10个回答
29
function displaymessage() {
    $("select").each(function() { this.selectedIndex = 0 });
}

这会选择第一个选项（不一定是值为0的选项）

感谢Fabrizio的帮助，但是它没有起作用，我觉得看起来没问题。 - Keith Power
Keith，上述代码只有在你已经包含了jQuery库时才能工作。 - nkm
谢谢，我之前只是包含了一个旧版本，现在运行得很好。干杯！ - Keith Power
9
这里有一种使用原生JavaScript选择所有
4
如何尝试类似以下的内容：
$(window).unload(function () {
    $("select").val("0");
});
2

使用原始的 JavaScript 代码，我们可以做到以下这些：

elements = document.getElementsByTagName("select")
for(i=0; i < elements.length ; i++){
 elements[i].selectedIndex= 0;
}
1

首先，您不应该为不同的标签使用相同的名称/ID。每个标签的名称/ID应该是唯一的。

在标签中调用函数的方式如下：

然后修改你的函数，如下：

function displaymessage() { var x = document.getElementsByTagName('select'); for (var i = 0; i < 2; i++) { document.getElementById(x[i].id).options[0].selected = "0"; } }
1

到目前为止，我看到的jQuery解决方案都没有考虑删除先前存在的selected属性，因此我认为需要进行这个额外的步骤：

$("#myControlId").find("select").each(function (index) {
        var ctrl=$(this);       
        if (ctrl.children().length > 0) {
            $(ctrl.children()).each(function(index) {
                if (index===0) $(this).attr('selected', 'selected'); 
                else $(this).removeAttr('selected');
            });
        }
});

这个解决方案只保留第一个选项中的一个selected属性，并删除所有其他属性（如果有的话）。
1

试试这个：

function displaymessage() {
    $("select").val("0");
}
1
另一种方式
$('select option:first-child').attr('selected', 'selected');

DEMO

的英译中，保留了HTML格式，不做解释。
0

$('#dropDownListID').val("");

或者

$('#dropDownListID').val("0");

0

试试这个：

$( 'select' ).each( function () {
    if ( $( this ).children().length > 0 ) {
        $( $( this ).children()[0] ).attr( 'selected', 'selected' );
    }
} );
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接