62

我有选择框

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

4

24 回答 24

85

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

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

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

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

演示

这甚至适用于多选元素。

如果您不想遍历所有选项，而是在找到最初选择的选项后“中断”，则可以.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;
}
于 2013-06-04T08:38:05.630 回答
19 
$('#my_select').get(0).selectedIndex = 1;

但是，在我看来，更好的方法是仅使用 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>
于 2013-06-04T08:32:01.090 回答
15 
$("#reset").on("click", function () {
    $("#my_select").val('b');//Setting the value as 'b'
});
于 2013-06-04T08:32:28.963 回答
10

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

function reset(){
document.getElementById("my_select").selectedIndex = 1; //1 = option 2
}
于 2014-07-15T22:39:59.567 回答
8

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

更新

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

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

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

于 2013-06-04T08:34:41.950 回答
5 
$("#reset").on("click", function () {
    $('#my_select').prop('selectedIndex',0);
});
于 2013-06-04T08:32:06.597 回答
5 
<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);
});

这是您提出问题的一种简单方法。只有一行答案。

于 2019-05-29T04:44:07.520 回答
4

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

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

然后代码非常简单：

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

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

于 2013-06-04T08:33:59.887 回答
3

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

请在此处查看实际操作：

现场示例：

$(function(){
    $("#filter").click(function(){
        //alert('clicked!');
        $('#name').prop('selectedIndex',0);
        $('#name2').prop('selectedIndex',0);
        $('#submitBtn').click();
    });
});
于 2015-10-30T16:56:00.530 回答
2

如果您想重置，请尝试以下操作：

$('element option').removeAttr('selected');

要设置期望值，请尝试如下：

$(element).val('1');
于 2020-04-21T08:56:02.900 回答
2 
$("#reset").on("click", function () {
    $('#my_select').val('-1');
});

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

于 2018-03-09T09:55:04.663 回答
1

如果使用 Spring 表单，您可能需要将 selected 重置为您的选项标签。您可以将您的表单：选择 id 值设置为空字符串，将您的选择重置为默认标签。

<form:select path="myBeanAttribute" id="my_select">
    <form:option value="" label="--Select One--"/>
    <form:options items="${mySelectionValueList}"/>
</form:select>

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

在有重置按钮的情况下。否则

$("#my_select").val("");
于 2015-04-28T18:03:48.540 回答
1

你可以这样做：

var preval = $('#my_select').val(); // get the def value

$("#reset").on("click", function () {
   $('#my_select option[value*="' + preval + '"]').prop('selected', true);
});

签出这个小提琴

在更改事件之前获取一个var保存默认加载值的选项，然后获取带有属性选择器的选项，其中包含将属性var设置为选中的值。

于 2013-06-04T08:36:58.953 回答
1

这段代码会帮助你。

<html>
<head>
    <script type="text/JavaScript" src="jquery-2.0.2.min.js"></script>
    <script type="text/JavaScript">
        $(function(){
            var defaultValue = $("#my_select").val();
            $("#reset").click(function () {
                $("#my_select").val(defaultValue);
            });
        });
    </script>
</head>
<body>
    <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">
        <input type="button" value="reset"/>
    </div>
</body>

于 2013-06-04T08:43:05.770 回答
1

将事件处理程序绑定到 的焦点事件select以捕获先前的值。然后将 的值select设置为单击重置时的先前值。

var previousValue = "";
$("#my_select").on("focus",function(){
    previousValue = $(this).val();
});

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

工作示例：http: //jsfiddle.net/T8sCf/17/

于 2013-06-04T08:36:13.277 回答
1

一种简单的运行方式是

 var myselect = $("select.SimpleAddAClass");
 myselect[0].selectedIndex = 0;
 myselect.selectmenu("refresh");
于 2016-10-12T14:20:22.630 回答
1

对于那些使用 Bootstrap-select 的人，你可能想要使用这个：

$('#mySelect').selectpicker('render');
于 2016-08-22T13:07:30.697 回答
1

使用 jquery：

$("#reset").on("click", function() {
    $('#my_select').val($('#my_select').find('option[selected="selected"]').val());
}
于 2017-06-09T13:24:46.513 回答
1 
$('#my_select').find('option:not(:first)').remove();

每次在填充选择之前调用此函数

于 2018-10-28T22:02:28.597 回答
0

这对我有用：

$("#reset").on("click", function () {
    $("#my_select option[selected]").prop('selected', true);
}

您找到具有 select 属性的默认选项，并将选择更改为该选项。

于 2014-07-09T11:20:58.640 回答
0

你可以试试

$('select')[0].value = "default vaule"


function reset(){
  $('select')[0].value="default value"
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="default value" >Default</option>
  <option value="1" >Value 1</option>
  <option value="2" >Value 2</option>
  <option value="3" >Value 3</option>
</select>
<button onclick="reset()" >Click</button>

于 2021-05-19T06:38:50.920 回答
0

将所有选择字段重置为默认选项，其中定义了选定的属性。

$("#reset").on("click", function () {
    // Reset all selections fields to default option.
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
});
于 2016-07-18T07:19:10.017 回答
0

不幸的是，我试图像其他答案一样解决它，但我没有找到正确的方法，一旦我尝试如下所示：

$('#<%=ddID.ClientID %>').get(0).selectedIndex = 0;

这段代码对我有用，我希望对你们有用。

此致。

塞缪尔·阿尔瓦拉多。

于 2017-02-02T16:45:33.193 回答
-3

我有选择框

<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”并且在我需要将选择框值重置为默认值后，如何使用 Angular2 来实现？

于 2017-11-07T06:47:58.823 回答