Question

我对这个问题变得非常疯狂。我正在尝试按下一个按钮，将所有选择框重置为默认值。我尝试了各种方法，所有方法都失败了。我也没有在浏览器控制台中收到任何错误。我将向您展示一些我尝试过的不同方法。

这是我的HTML代码：

<div class="main-search-results">
  <select name="provincia" id="select-filter-2">
    <option value="cualquier_provincia" selected="selected">Cualquier provincia</option>
    <option value="a_coruña">A Coruña</option>
    <option value="alava">Alava</option>
  </select>
</div>

这是我试图解决的方法之一

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

这是我如何请求js和css链接。注意select-custom.js是用'（＃select-filter-2'）构建选择器的地方.selectmenu（）这个文件不允许我重置选择。如果我删除它工作得很好。

<link rel="stylesheet" href="assets/css/foundation.min.css">
<link rel="stylesheet" href="assets\css\font-awesome\css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/jquery-ui.css">
<link rel="stylesheet" href="assets/css/jquery-ui.structure.css">
<link rel="stylesheet" href="assets/css/jquery-ui.theme.css">
<link rel="stylesheet" href="assets/css/app.css">
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/slider.js"></script>
<script src="assets/js/select-custom.js"></script>

Answer 1

这是我实施的解决方案并且正常运行。感谢A.J.这帮助了我的答案。

$(function(){

  $('select').selectmenu();

  function cleanFilters() {
    $('select').val('default');
    $('select').selectmenu('refresh');
  }  

  $('#reset').click(function(){
    cleanFilters();
  });
});

Answer 2

试试这个：

 $(function(){
     $("#reset")
     .on("click", function(){
    $("#select-filter-2")
       .find("option[value=cualquier_provincia]")
       .prop("selected", "selected");
     });

 });

fiddle显然只会重置其中一个。但是，如果你申请.default之类的课程，那么你可以去：

 $("#select-filter-2")
       .find("option.default")
       .prop("selected", "selected");

Answer 3

检查this：

＆＃13;

$("#reset").on("click",function(){
$("#select-filter-2").prop('selectedIndex',0);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="provincia" id="select-filter-2">
    <option value="cualquier_provincia" selected="selected">Cualquier provincia</option>
    <option value="a_coruña">A Coruña</option>
    <option value="alava">Alava</option>
  </select>
<button id="reset">Reset</button>

＆＃13;

以下是多个选择框的example

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="provincia" id="select-filter-2">
  <option value="cualquier_provincia" selected="selected">Cualquier provincia</option>
  <option value="a_coruña">A Coruña</option>
  <option value="alava">Alava</option>
</select>
<select name="provincia">
  <option value="cualquier_provincia" selected="selected">Cualquier provincia</option>
  <option value="a_coruña">A Coruña</option>
  <option value="alava">Alava</option>
</select>
<button id="reset">Reset</button>

＆＃13;

<强>更新：

如评论中所述，如果默认情况下未选择第一个索引，请使用：

＆＃13;

$("#reset").on('click',function(){
    if($("#select-filter-2").find("option[selected]").length > 0){
        var s =$("#select-filter-2").find("option[selected]").val(); //selected="selected" and just selected both are valid so keep it generic
        $("#select-filter-2").val(s);
    }else{
        $("#select-filter-2").prop('selectedIndex',0); // in case no option is set selected then fall back to first option
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-search-results">
  <select name="provincia" id="select-filter-2">
    <option value="cualquier_provincia" >Cualquier provincia</option>
    <option value="a_coruña" selected="selected" >A Coruña</option>
    <option value="alava">Alava</option>
  </select>
</div>
<button id="reset">Reset</button>

＆＃13;

根据Op评论更新：

使用以下refresh you menu。

$( "#select-filter-2" ).selectmenu( "refresh" );

Answer 4

试试这段代码，

$("#res").on('click',function(){
    var s =$("#select-filter-2").find("option[selected='selected']").val();
    $("#select-filter-2").val(s);
});

注意：res是常规按钮的ID。我也做了一个，你可以通过使用一个普通的类来概括许多选择。

的jsfiddle：http://jsfiddle.net/vLgxvkyk/

重置按钮以在选择框中设置默认值

4 个答案: