Question

我有以下代码。根据功能，当用户选择第一个单选按钮时，不需要任何操作，但是当用户选择第二个单选按钮时，会显示多选jquery下拉列表。用户可以选中复选框。这可以。在用户选中复选框然后单击第一个单选按钮后，下拉列表应该消失，值应该重置，换句话说，复选框应该取消选中。我可以使用hide()使其消失，但值不会被取消选中。所以当我回来时，我仍然看到旧的价值观。

<div id="radioButton" data-role="fieldcontain" style="display: none">
    <label for="flip-1">Choose Something </label>
       <fieldset data-role="controlgroup">

         <input type="radio" name="radio-choice-2" id="radio-choice-1" value="choice-1" /> 
         <label for="radio-choice-1">All Business Catergories</label> 
         <input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice-2" /> 
         <label for="radio-choice-2">A specific business category</label>

       </fieldset>
</div>

<div id="multiCheckbox" style="display: none">

    <select name="busiUnit" id="day" multiple="multiple" data-native-menu="false">
        <option>Business Unit Category</option>
        <option value="29">ABC</option>
        <option value="30">XYZ</option>
        <option value="31">BCD</option>
    </select>
</div>
</div>

我正在使用jquery hide()＆amp; show()方法，用于显示和隐藏下拉列表。下面是代码用于阅读复选框。

$("#day").change(function(){

    var str = "";
    busiArray=[];                                

    $( "select#day option:selected" ).each(function() {

        str = $( this ).val();
        busiArray.push(str);

    });

});

如何重置下拉列表？

感谢。

Answer 1

将change事件收听到您想要的任何单选按钮，然后重置选择菜单的值 .val("")，然后重置.selectmenu("refresh")以重新应用样式。

请注意，您需要使用jQuery Mobile 1.4.5，因为之前版本中有bug。

$("#radio-choice-1").on("change", function () {
   if($(this).is(":checked")) {
     $("#day").val("").selectmenu("refresh");
   }
});

<强> Demo

Answer 2

尝试使用此代码重置下拉列表：

var items = ["facebook","twitter","instagram","stackoverflow"];

    // Populate dropdown
   jQuery.each(items,function(i,d){
           // auto select option
           jQuery("#populate").append("<option "+(i==3?"selected":"")+">"+d+"</option>");
   });
   // Reset 
   jQuery("input[class=reset]").click(function(){
     
          jQuery("#populate option:selected").removeAttr("selected");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select id="populate">
  <option>--</option>
</select>

<input type="button" value="Reset" class="reset"/>

如何重置jquery multiselect复选框下拉列表

2 个答案: