在下面的提琴中，我有一個引導模式，並有一個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