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

reset button to set default values in select boxes

本文关键字：设置 默认值 选择 按钮      更新时间：2023-09-26

我对这个问题真的很着迷。我正在尝试做一个按钮，将我所有的选择框重置为默认值。我试过各种方法，但都失败了。我在浏览器控制台中也没有收到任何错误。我将向您展示我尝试过的几种不同方法。

这是我的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>

这是我实现的解决方案，运行良好。感谢A.J.帮我找到了答案。

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

试试这个：

 $(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");

试试这个代码，

$("#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/

检查此项：

$("#reset").on("click",function(){
$("#select-filter-2").prop('selectedIndex',0);
})
<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>

以下是一个以上选择框的示例

$("#reset").on("click", function() {
  $("select").prop('selectedIndex', 0);
})
<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>

更新：

如评论中所述，如果默认情况下没有选择第一个索引，则使用以下内容：

$("#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
    }
});
<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>

根据操作注释更新：

使用以下内容刷新菜单。

$( "#select-filter-2" ).selectmenu( "refresh" );
相关文章：