jQuery 将选择值重置为默认值

Reset select value to default

提问by Oto Shavadze

I have select box

我有选择框

<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>

I have also reset button, here default (selected) value is "b", suppose I select "c" and after I need resert select box value to default, how to make this using jquery?

我也有重置按钮，这里默认（选定）值是“b”，假设我选择“c”并且在我需要将选择框值重置为默认值后，如何使用 jquery 进行设置？

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

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

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

回答by Felix Kling

You can make use of the defaultSelectedproperty of an option element:

您可以使用defaultSelected选项元素的属性：

Contains the initial value of the selectedHTML attribute, indicating whether the option is selected by default or not.

包含selectedHTML 属性的初始值，表示该选项是否被默认选中。

So, the DOM interface already keeps track which option was selected initially.

因此，DOM 界面已经跟踪最初选择了哪个选项。

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

DEMO

演示

This would even work for multi-select elements.

这甚至适用于多选元素。

If you don't want to iterate over all options, but "break" after you found the originally selected one, you can use .eachinstead:

如果您不想遍历所有选项，而是在找到最初选择的选项后“中断”，则可以.each改用：

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

---

---

Without jQuery:

没有 jQuery：

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

回答by Oto Shavadze

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

---

---

But, In my opinion, the better way is using HTML only (with <input type="reset" />):

但是，在我看来，更好的方法是仅使用 HTML（带有<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>

• Check the jsFiddle Demo.

• 检查jsFiddle 演示。

回答by Deepu

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

回答by Chamika Sandamal

You can use the dataattribute of the selectelement

您可以使用元素的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>

Your JavaScript,

你的 JavaScript，

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

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

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

UPDATE

更新

---

---

If you don't know the default selection and if you cannot update the html, add following code in the dom ready ,

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

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

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

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

回答by freeworlder

Why not use a simple javascript function and call it on onclick event?

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

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

回答by Jamiec

One nice clean way is to add a data-defaultattribute to the select

一种不错的干净方法是向data-default选择添加一个属性

<select id="my_select" data-default="b">
...
</select>

An then the code is really simple:

然后代码非常简单：

$("#reset").on("click", function () {
    var $select = $('#my_select');
    $select.val($select.data('default'));
});

Live example: http://jsfiddle.net/T8sCf/7/

现场示例：http: //jsfiddle.net/T8sCf/7/

回答by IdemeNaHavaj

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

回答by Ajit Kumar

<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);
});

This is a simple way for your question. only one line answer.

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

回答by Chale CS

You can also reset the values of multiple SELECTs and then trigger the submit button.

您还可以重置多个 SELECT 的值，然后触发提交按钮。

Please see it here in action:

请在此处查看实际操作：

Live Example:

现场示例：

$(function(){
    $("#filter").click(function(){
        //alert('clicked!');
        $('#name').prop('selectedIndex',0);
        $('#name2').prop('selectedIndex',0);
        $('#submitBtn').click();
    });
});

回答by Sagar Sinha

$("#reset").on("click", function () {
    $('#my_select').val('-1');
});

http://jsfiddle.net/T8sCf/1323/

http://jsfiddle.net/T8sCf/1323/