将选择值重置为默认值答案

【问题标题】：Reset select value to default将选择值重置为默认值
【发布时间】：2013-05-30 13:39:47
【问题描述】：

我有选择框

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

【问题讨论】：

如果要重置整个表单，只需在<form> 元素上调用内置JavaScript .reset()。
reset a select element的可能重复
另外，<select> 有一个 defaultSelected，如果你只想重置单个元素，可以在函数中使用它 - 请参阅 stackoverflow.com/questions/2348042/…
@andyb 第一个元素不一定是默认选中值
@BrunoLM 是的，我同意你的观点。我引用了另一个问题，因为它非常相似 - “使用 JavaScript 将选择值重置为默认值”

标签： javascript jquery html

【解决方案1】：

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

【讨论】：

有什么理由将get(0) 与ID 选择器一起使用？
@ChamikaSandamal 不，只是快速打字。
@ChamikaSandamal .get(0) 用于获取DOM元素，以便访问.selectedIndex等属性
除了$('#my_select').get(0)，我们还可以使用$('#my_select')[0] - 更快打字。

【解决方案2】：

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

【讨论】：

它不起作用，因为选中的 'b' 位于第二个位置

【解决方案3】：

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

【讨论】：

我不知道高级选择框中的默认值是什么
@OTARIKI - 如果您事先不知道默认值是什么，您怎么知道将selected="selected" 属性添加到哪个选项？！
对，所以服务器端你仍然可以生成知道默认值的客户端代码！
它没有重置，我认为它的设置。
@Jamiec：可以，但不一定会生成 JavaScript。

【解决方案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/

【讨论】：

【解决方案5】：

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

<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中添加以下代码，

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

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

【讨论】：

最后，这对我有用，谢谢[我正在使用 Material Bootstrap]

【解决方案6】：

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

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

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

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

【讨论】：

【解决方案7】：

你可以这样做：

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，它在更改事件之前保存默认加载的值，然后获取带有属性选择器的选项，其中包含var值，将属性设置为选中。

【讨论】：

你可以用$('#my_select').val(preval)代替$('#my_select option[value*="' + preval + '"]').prop('selected', true);。

【解决方案8】：

您可以使用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;
}

【讨论】：

使用defaultSelected 属性设置您的默认选项元素并像这样重置$('#select option').removeAttr('selected');

【解决方案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>

【讨论】：

OP 不知道默认选择哪个选项。
加载页面时，可以根据应用选择的值设置变量。相同的变量可用于设置单击重置时的值。
也许您应该将其添加到您的答案中。

【解决方案10】：

这对我有用：

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

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

【讨论】：

【解决方案11】：

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

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

【讨论】：

“1 = 选项 2”是什么意思？
JS 从 0 开始计算选择的索引。第一个选择的选项是 selectedIndex = 0，第二个选项 = 1，第三个选项 = 2，等等。

【解决方案12】：

如果使用 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("");

【讨论】：

【解决方案13】：

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

请在此处查看实际操作：

Live Example:

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

【讨论】：

【解决方案14】：

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

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

【讨论】：

【解决方案15】：

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

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

【讨论】：

【解决方案16】：

一个简单的运行方式是

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

【讨论】：

【解决方案17】：

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

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

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

最好的问候。

塞缪尔·阿尔瓦拉多。

【讨论】：

【解决方案18】：

使用 jquery ：

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

【讨论】：

值得扩展您的答案以解释代码的作用。想想那些不知道这意味着什么的 jQuery 新用户。

【解决方案19】：

我有选择框

<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 来做到这一点？

【讨论】：

这不是提问的正确方式。这只是为了回答。对于您的查询，请通过 ASK QUESTION 按钮。
对不起。我是这个社区的新用户。下次会在s里发帖

【解决方案20】：

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

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

【讨论】：

短小精悍！

【解决方案21】：

$('#my_select').find('option:not(:first)').remove();

每次在填充 select

之前调用此函数

【讨论】：

我一直在寻找重置选择小部件的方法 - 通过删除所有选项

【解决方案22】：

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

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

【讨论】：

【解决方案23】：

如果你想重置，试试这个：

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

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

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

【讨论】：

【解决方案24】：

你可以试试

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

【讨论】：