jquery multiple selectで選択されたオプションのチェックボックスをクリアする

Question

以下のフィドルでは、私はブートストラップモーダルを持っており、Select Users MultipleSelectがあります。

私はモーダルクローズ時に選択を解除する必要があります。ドロップダウンをデフォルトなしに設定する必要はありません。

たとえば、ユーザ1とユーザ2を選択した場合、モーダルクローズでは、どれも選択しないでください。前の選択はなくてはなりません。

私が試しているコードは、私を助けてくれるわけではありませんし、どちらもスタックオーバーフローの投稿ではありません。

私が試したことはほとんどがこれです：

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

そして、この：

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

そしてまた、この：

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

私は何をすべき私を導いてください？

Fiddle

Answer 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 
}) 

Answer 2

あなたは$("#usersDropDown").prop('selectedIndex',-1);を試みたことがありますか？

Answer 3

こんにちは、あなたは今fiddleをチェックできますか？その仕事は私が推測する。 私はこのコードをモダールに加えました。あなたは隠された機能

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

Answer 4

に追加することができますしたい場合は、すべての選択を解除する$('#usersDropDown').multipleSelect("uncheckAll"); INORDERを使用することができます。

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>

Answer 5

作品：

$("input:checkbox").removeAttr("checked");