将select值重置为默认值
我有select框
<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> 我也有重置button，这里默认（select）值是“B”，假设我select“C”和我需要插入后select框值默认，如何使这个使用jQuery？
$("#reset").on("click", function () { // What do here? });
jsfiddle： http : //jsfiddle.net/T8sCf/1/
您可以使用选项元素的defaultSelected属性 ：
包含
selectedHTML属性的初始值，指示是否默认select该选项。
所以，DOM接口已经跟踪了最初select哪个选项。
$("#reset").on("click", function () { $('#my_select option').prop('selected', function() { return this.defaultSelected; }); });
DEMO
这甚至可以用于多选元素。
如果您不想迭代所有选项，但在find最初select的选项之后“中断”，则可以使用.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; }
$("#reset").on("click", function () { $("#my_select").val('b');//Setting the value as 'b' });
$('#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演示 。
为什么不使用简单的JavaScript函数，并在onclick事件调用它？
function reset(){ document.getElementById("my_select").selectedIndex = 1; //1 = option 2 }
您可以使用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")); });
UPDATE
如果您不知道默认select，并且您不能更新html，请在dom中添加以下代码，
$("#my_select").data("default-value",$("#my_select").val());
$("#reset").on("click", function () { $('#my_select').prop('selectedIndex',0); });
一个很好的干净的方法是添加一个data-default属性到select
<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/
将事件处理程序绑定到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/
你可以这样做：
var preval = $('#my_select').val(); // get the def value $("#reset").on("click", function () { $('#my_select option[value*="' + preval + '"]').prop('selected', true); });
结帐这个小提琴
在var事件之前保存默认的加载值，然后获得带有属性select器的选项，并保持var值将属性设置为选中状态。
这段代码将帮助你。
<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>
如果使用Spring表单，则可能需要将所选内容重置为选项标签。 您将设置您的表单：selectid值为空string将您的select重置为默认的标签。
<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(""); });
在有重置button的情况下。 除此以外
$("#my_select").val("");
对于那些正在使用Bootstrap-select的人来说，你可能想用这个：
$('#mySelect').selectpicker('render');
一个简单的方法是运行
var myselect = $("select.SimpleAddAClass"); myselect[0].selectedIndex = 0; myselect.selectmenu("refresh");
用jquery：
$("#reset").on("click", function() { $('#my_select').val($('#my_select').find('option[selected="selected"]').val()); }
您也可以重置多个SELECT的值，然后触发提交button。
请看这里在行动：
现场示例：
$(function(){ $("#filter").click(function(){ //alert('clicked!'); $('#name').prop('selectedIndex',0); $('#name2').prop('selectedIndex',0); $('#submitBtn').click(); }); });
这适用于我：
$("#reset").on("click", function () { $("#my_select option[selected]").prop('selected', true); }
您可以find具有select属性的默认选项，并将选项更改为该选项。
将所有select字段重置为默认选项，其中定义了所选属性。
$("#reset").on("click", function () { // Reset all selections fields to default option. $('select').each( function() { $(this).val( $(this).find("option[selected]").val() ); }); });
我试图解决它像其他答案不幸的是，我没有得到一个正确的方式来做到这一点，一旦我尝试，我写下面：
$('#<%=ddID.ClientID %>').get(0).selectedIndex = 0;
这段代码适合我，我希望这对你们有用。
最好的祝福。
塞缪尔·阿尔瓦拉多
我有select框
<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>
我也有重置button，这里默认（select）的值是“B”，假设我select“C”和我需要插入后select框值默认，如何使这个使用Angular2？
