将选择值重置为默认值

Question

我有选择框

<select id="my_select">
    <option value="a">a</option>
    <option value="b" selected="selected">b</option>
    <option value="c">c</option>
</select>

<div id="reset">
    reset
</div>

我也有重置按钮,这里默认(选中)值是"b",假设我选择"c"并且我需要重新选择框值为默认值,如何使用jquery进行此操作？

$("#reset").on("click", function () {
    // What do here?
});

jsfiddle:http://jsfiddle.net/T8sCf/1/

Answer 1

您可以使用defaultSelectedoption元素的属性:

包含selectedHTML属性的初始值,指示是否默认选择该选项.

因此,DOM接口已经跟踪最初选择了哪个选项.

$("#reset").on("click", function () {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });
});

DEMO

这甚至适用于多选元素.

如果您不想迭代所有选项,但在找到最初选择的选项后"中断",则可以使用.each:

$('#my_select option').each(function () {
    if (this.defaultSelected) {
        this.selected = true;
        return false;
    }
});

没有jQuery:

var options = document.querySelectorAll('#my_select option');
for (var i = 0, l = options.length; i < l; i++) {
    options[i].selected = options[i].defaultSelected;
}

Answer 2

$('#my_select').get(0).selectedIndex = 1;

但是,在我看来,更好的方法是仅使用HTML(with <input type="reset" />):

<form>
    <select id="my_select">
        <option value="a">a</option>
        <option value="b" selected="selected">b</option>
        <option value="c">c</option>
    </select>
    <input type="reset" value="reset" />
</form>

• 检查jsFiddle演示.

Answer 3

$("#reset").on("click", function () {
    $("#my_select").val('b');//Setting the value as 'b'
});

Answer 4

您可以使用元素的data属性select

<select id="my_select" data-default-value="b">
    <option value="a">a</option>
    <option value="b" selected="selected">b</option>
    <option value="c">c</option>
</select>

你的JavaScript,

$("#reset").on("click", function () {
    $("#my_select").val($("#my_select").data("default-value"));
});

http://jsfiddle.net/T8sCf/10/

UPDATE

如果您不知道默认选择并且无法更新html,请在dom ready中添加以下代码,

$("#my_select").data("default-value",$("#my_select").val());

http://jsfiddle.net/T8sCf/24/

Answer 5

为什么不使用简单的javascript函数并在onclick事件上调用它？

function reset(){
document.getElementById("my_select").selectedIndex = 1; //1 = option 2
}

Answer 6

$("#reset").on("click", function () {
    $('#my_select').prop('selectedIndex',0);
});

Answer 7

<select id="my_select">
    <option value="a">a</option>
    <option value="b" selected="selected">b</option>
    <option value="c">c</option>
</select>

<div id="reset">
    reset
</div>

$("#reset").on("click", function () {
    $('#my_select').prop('selectedIndex',0);
});

这是您的问题的简单方法。只有一行回答。