在下面的提琴中，我有一个引导模式，并有一个Select Users MultipleSelect。清除jquery多选中所选选项的复选框
我需要清除模式关闭的选择，例如将下拉菜单设置为默认值而不进行任何选择。
例如，如果我选择用户1和用户2，则在模式关闭时，不应选择任何选项。之前的选择必须消失。
我正在尝试的代码没有帮助我，也没有任何帖子在这里堆栈溢出。
一点点，我试图是这样的：
$("#usersDropDown option:selected").attr("checked",false);
这：
$("#usersDropDown option:selected").attr("selected",false);
而且也是这样：
$("#usersDropDown option:selected").removeAttr("checked");
请指导我该怎么办？
您可以使用下面的代码将表单数据和多选择框重置在引导模式窗口中清除内容下拉。
$('#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
})
你试过$("#usersDropDown").prop('selectedIndex',-1);？
是的，我做了，但它不工作。 –
嗨，你现在可以检查fiddle。我想它的工作。 我将此代码添加到显示的模式。如果你愿意，你可以把它添加到隐藏的功能
$("#usersDropDown").siblings(".ms-parent")
.find("li.selected input[type='checkbox']").click();
它的工作！非常感谢 ！！ –
您可以使用$('#usersDropDown').multipleSelect("uncheckAll");序取消选择所有。
JSFiddle
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,
\t \t \t sideBySide:false,
\t \t \t useCurrent:false,
\t \t \t showClose:true,
\t \t \t focusOnShow: false,
\t \t });
\t \t $('#hoursInputExpiry').datetimepicker({
format: 'HH:mm',
collapse:true,
\t \t \t sideBySide:false,
\t \t \t useCurrent:false,
\t \t \t showClose:true,
\t \t \t focusOnShow: false,
\t \t });
$("#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');
});.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}<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">
\t \t \t \t \t \t \t \t <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">
\t \t \t \t \t \t \t \t <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">
\t \t \t \t \t \t \t <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">
\t \t \t \t \t \t \t \t <span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>它的工作！非常感谢 ！ –
@AshishBahl欢迎您，我认为这是对正在使用的插件取消选中的正确方法。 http://wenzhixin.net.cn/p/multiple-select/docs/#checkall-uncheckall –
工作对我来说：
$("input:checkbox").removeAttr("checked");
'.prop（ “选择”，假）' – Andreas
不工作，要么 –
您使用loudev多选插件？ – Aarrbee