如何重置 jquery 多选复选框下拉菜单答案

【问题标题】：How to reset a jquery multiselect checkbox dropdown如何重置 jquery 多选复选框下拉菜单
【发布时间】：2018-06-14 17:46:28
【问题描述】：

我有以下代码。根据功能，当用户选择第一个单选按钮时，不需要任何操作，但是当用户选择第二个单选按钮时，会显示多选 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() & show() 方法来显示和隐藏下拉菜单。下面的代码用于阅读复选框。

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

    var str = "";
    busiArray=[];                                

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

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

    });

});

如何重置下拉菜单？

谢谢。

【问题讨论】：

标签： jquery jquery-mobile checkbox

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

【讨论】：

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

【讨论】：