清除jquery multiple select中所选选项的复选框

时间：2017-03-01 07:59:41

标签： javascript jquery html twitter-bootstrap multiple-select-query

在下面的小提琴中，我有一个bootstrap模式，并且有一个Select Users MultipleSelect。

我需要清除关于模态关闭的选择，比如将下拉列表设置为默认值而不进行任何选择。

例如，如果我选择用户1和用户2，则在模态关闭时，不应选择任何一个。之前的选择必须消失。

我正在尝试的代码并没有帮助我，也没有任何关于堆栈溢出的帖子。

我试过的一点是：

$("#usersDropDown option:selected").attr("checked",false);

而且：

$("#usersDropDown option:selected").attr("selected",false);

还有这个：

$("#usersDropDown option:selected").removeAttr("checked");

请指导我该怎么办？

Fiddle

5 个答案:

答案 0 :(得分：1)

您好，现在可以查看fiddle。它的工作我猜。 我将此代码添加到显示的模式中。如果您愿意，可以将其添加到隐藏功能

$("#usersDropDown").siblings(".ms-parent")
 .find("li.selected input[type='checkbox']").click();

答案 1 :(得分：1)

您可以使用$('#usersDropDown').multipleSelect("uncheckAll");取消选择所有内容。

JSFiddle

＆＃13;
＆＃13; 
var currentDate = new Date();
var day = currentDate.getDate();

if (day < 10)
  day = "0" + day;

var month = currentDate.getMonth() + 1;
if (month < 10) {
  month = "0" + month;
}
var hours;
var year = currentDate.getFullYear();
todayDateReport = year + "-" + month + "-" + day;
$("#currentDate").html(todayDateReport);
startDate = todayDateReport + " 00:00:00";
endDate = todayDateReport + " 23:59:59";
hours = " 00:00";

$('.input-group').datetimepicker({
  format: 'YYYY-MM-DD HH:mm',
  collapse: true,
  sideBySide: false,
  useCurrent: false,
  showClose: true,
});
 $('#hoursInput').datetimepicker({
             format: 'HH:mm',
            collapse:true,
			 sideBySide:false,
			 useCurrent:false,
			 showClose:true,
			 focusOnShow: false,
		 });
		 $('#hoursInputExpiry').datetimepicker({
             format: 'HH:mm',
             collapse:true,
			 sideBySide:false,
			 useCurrent:false,
			 showClose:true,
			 focusOnShow: false,
		 });
$("#startDateInputExpiry").val(startDate);
$("#endDateInputExpiry").val(endDate);
$("#hoursInput").val(hours);
$("#hoursInputExpiry").val(hours);

$("#sendDropDownOptions").on('change', function() {
  if ($("#sendDropDownOptions option:selected").text() == "Datetime") {
    $("#durationHoursSend").addClass('hide');
    $("#sendTD").append($("#startdatetimeSend"))
    $("#startdatetimeSend").removeClass('hide');
  } else if ($("#sendDropDownOptions option:selected").text() == "Hours") {
    $("#startdatetimeSend").addClass('hide');
    $("#sendTD").append($("#durationHoursSend"))
    $("#durationHoursSend").removeClass('hide');
  } else {
    $("#startdatetimeSend").addClass('hide');
    $("#durationHoursSend").addClass('hide');
  }
});

$('#shareLocationModal').on('shown.bs.modal', function() {

$('#usersDropDown').multipleSelect("uncheckAll");

  if ($("#expiryDropDownOptions option:selected").text() == "DatetimeExp") {
    $("#startdatetimeExpiry").removeClass('hide');
    $("#expiryTD").append($("#startdatetimeExpiry"))
  }
});
$("#expiryDropDownOptions").on('change', function() {
   if ($("#expiryDropDownOptions option:selected").text() == "HoursExp") {
    $("#startdatetimeExpiry").addClass('hide');
    $("#durationHoursExpiry").removeClass('hide');
    $("#expiryTD").append($("#durationHoursExpiry"))
  }else if ($("#expiryDropDownOptions option:selected").text() == "DatetimeExp") {
    $("#durationHoursExpiry").addClass('hide');
    $("#startdatetimeExpiry").removeClass('hide');
    $("#expiryTD").append($("#startdatetimeExpiry"))
  }
  else {
    $("#durationHoursExpiry").addClass('hide');
    $("#startdatetimeExpiry").addClass('hide');
  }
});

$("#usersDropDown").multipleSelect({
  placeholder: "Select Users",
  selectAll: true,
  width: "100%",
  filter: true,
});

$("#send").on("click", function()
        {
                $("#sendDropDownOptions").val('Now').trigger('change');
        });
＆＃13; 
.modal-body {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}
＆＃13; 
<link href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/css/jasny-bootstrap.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script><script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    
  
    
      <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    
  
    
      <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
  
    
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/css/jasny-bootstrap.css">
    
  
    
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/js/jasny-bootstrap.js"></script>
    
  
    
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
    
  
    
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.js"></script>
    
  
    
      <link rel="stylesheet" type="text/css" href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css">


<button class="btn btn-primary btn-responsive md-btn" id="btnn" data-toggle="modal" data-target="#shareLocationModal">
  Share
</button>

<div id="shareLocationModal" class="modal fade">
  <div class="modal-dialog wideModal">
    <div class="modal-content">
      <div class="modal-header modal-header-custom">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button>
        <h4 class="modal-title" id="modaltitle">Share Location Preferences</h4>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row form-group">
            <div class="col-xs-12">
              <div class="form-group col-md-12 col-sm-6">
                <form id="shalreLocationDetails" class="form">
                  <div>
                    <div class="form-group">
                      <label>Phone No:</label>
                      <input type="tel" class="form-control" id="phoneNo" data-toggle="tooltip" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Phone No" onkeypress="return checkValidation(event)" data-placement="bottom" placeholder="Mobile Number"
                      maxlength="10" data-validation="number">
                      <!-- <input type="text" class="form-control" id="phone"placeholder="Phone No" data-validation="number"  data-validation-allowing="+" /> -->
                    </div>

                    <div class="form-group">
                      <label>e-mail:</label>
                      <input type="email" class="form-control" id="email" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="e-mail" placeholder="e-mail" data-validation="email">
                    </div>

                    <div class="form-group">
                      <label>Select Users:</label>
                      <select id="usersDropDown" multiple="multiple" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Select Users">
                        <option>User 1</option>
                        <option>User 2</option>
                        <option>User 3</option>
                        <option>User 4</option>
                      </select>
                    </div>

                    <div class="form-group">
                      <label>Send:</label>
                      <select id="sendDropDownOptions" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Send Options" class="form-control" style="width:100%;">
                        <option value="Now">Now</option>
                        <option value="Datetime">Datetime</option>
                        <option value="Now">Hours</option>
                      </select>
                    </div>

                    <div id="sendTD"></div>
                    <br>

                    <div class="form-group">
                      <label>Expiry:</label>
                      <select id="expiryDropDownOptions" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Expiry Options" class="form-control" style="width:100%;">
                        <option>DatetimeExp</option>
                        <option>HoursExp</option>
                      </select>
                    </div>

                    <div id="expiryTD"></div>
                    <br>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary btn-responsive md-btn" id="send">Send</button>
        <button type="button" class="btn btn-default btn-responsive md-btn" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

<div id="startdatetimeSend" class="hide">
  <div class='input-group date' id='startDate'>
    <input type='text' class="form-control" placeholder="Start Date" id="startDateInputExpiry" />
    <span class="input-group-addon">
	                        							<span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

<div id="durationHoursSend" class="hide">
  <div class='date' id='startDate'>
    <input type='text' class="form-control" placeholder="Start Date" id="hoursInput" />
    <span class="input-group-addon">
	                        							<span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>


<div id="startdatetimeExpiry" class="hide">
  <div class="input-group date" id='endDate'>
    <input type='text' class="form-control" placeholder="End Date" id="endDateInputExpiry" />
    <span class="input-group-addon">
                        							<span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

<div id="durationHoursExpiry" class="hide">
  <div class='date' id='startDate'>
    <input type='text' class="form-control" placeholder="Start Date" id="hoursInputExpiry" style="position: relative;" />
    <span class="input-group-addon">
	                        							<span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

您可以使用以下代码重置表单数据和引导程序模式窗口下拉列表中的多选框以清除内容。

$('#shareLocationModal').on('hidden.bs.modal', function(){
    $('#usersDropDown').multipleSelect('refresh'); // to reset the multi select users dropdown
    $(this).find('form')[0].reset(); // To reset form fields
})

答案 3 :(得分：0)

您是否尝试过$("#usersDropDown").prop('selectedIndex',-1);？

答案 4 :(得分：0)

适合我：

$("input:checkbox").removeAttr("checked");
相关问题
最新问题