モーダルクローズ時に選択ボックスをデフォルト値に設定するにはどうすればよいですか？

Question

モーダルが隠されているときにモーダルの値をクリアしようとしています。私は通常の入力フィールドの値をクリアすることができますが、選択ボックスをデフォルト値（この場合は '0'）に戻すことはできません。

これは私のHTML /モーダルです：

<div class="modal fade" id="entity_request_modal" tabindex="-1" role="dialog" aria-labelledby="entity_request_modal" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">Request to Add Business Entity</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="form-group"> 
        {% csrf_token %} 

        <label>Business Name</label> 
        <input id="entity_name" class="form-control" placeholder="Enter business name..." name="entity_name" value=""> 
       </div> 
       <div class="form-group"> 
        <label>Entity Type</label> 
        <select data-placeholder="Entity Type..." class="chosen-select" tabindex="-1" id="select_entity_type" name="select_entity_type"> 
         <option value="0">Make a Selection</option> 
         <option value="3">Financial Institution</option> 
         <option value="14">College Institution</option> 
         <option value="13">Hospital or Clinic</option> 
         <option value="4">Internet Service Provider</option> 
         <option value="9">Cellular Provider</option> 
         <option value="10">Social Network</option> 
         <option value="7">Consumer Retailer</option> 
         <option value="8">Health Insurance Provider</option> 
         <option value="11">Auto Insurance Provider</option> 
         <option value="12">Home Insurance Provider</option> 
        </select> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" id="request_entity" class="btn btn-primary"> 
        Save changes 
       </button> 
      </div> 
     </div> 
    </div> 
</div> 

これは私のJS/JQです：

再び

$('#entity_request_modal').on('hide.bs.modal', function (e) { 
    $('#entity_name').val(''); 
    $('#select_entity_type').val('0'); 
}); 

、 '#entity_name' は正しくリセットされますが、 '#select_entity_typeが' ではありません。思考？

Answer 1

selectオプションselectedIndex propを0に設定することができます。

$('#select_entity_type').prop('selectedIndex',0); 

以下のように使用します。

$('#entity_request_modal').on('hide.bs.modal', function (e) { 
$('#entity_name').val(''); 
$('#select_entity_type').prop('selectedIndex',0); 
}); 

さらに、Fiddleをチェックしてください。