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

您可以使用defaultSelected property of an option element：

包含selected HTML属性的初始值，指示是否默认选择该选项。

因此，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（使用<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 Demo。

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/

<强> 更新

如果你不知道默认选择，如果你不能更新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的值，然后触发提交按钮。

请在此处查看：

Live Example:

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

Answer 8

一个很好的干净方法是在选择

中添加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/

Answer 9

此代码可以帮助您。

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

Answer 10

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

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

Answer 11

使用jquery：

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

Answer 12

运行的简单方法是

 var myselect = $("select.SimpleAddAClass");
 myselect[0].selectedIndex = 0;
 myselect.selectmenu("refresh");

Answer 13

对于那些使用Bootstrap-select的人，您可能想要使用它：

$('#mySelect').selectpicker('render');

Answer 14

如果使用Spring表单，您可能需要将所选内容重置为选项标签。您可以设置表单：将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("");

Answer 15

将事件处理程序绑定到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/

Answer 16

你可以这样做：

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

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

checkout this fiddle

在更改事件之前保留默认加载值的var，然后使用value的属性选择器获取选项，并保持var值将属性设置为选中。

Answer 17

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

$("#reset").on("click", function () {
    // Reset all selections fields to default option.
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
});

Answer 18

我试图像其他答案那样解决它，不幸的是，我没有找到正确的方法来做到这一点，一旦我尝试下面写的话：

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

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

最诚挚的问候。

Samuel Alvarado。

Answer 19

这对我有用：

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

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

Answer 20

.astype(str)

每次填充 select

之前，都要调用此函数

Answer 21

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

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

Answer 22

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

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

要设置欲望值，请尝试以下操作：

$(element).val('1');

Answer 23

你可以试试

$('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>

Answer 24

我有选择框

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

我还有重置按钮，这里默认（选中）值为＆＃34; b＆＃34;，假设我选择＆＃34; c＆＃34;并且在我需要重新选择框值为默认值之后，如何使用Angular2？

将选择值重置为默认值

24 个答案: