How to reset or set to default selected <option> in <select> after closing the modal

user_17416397 0
Viewed 698

Modal:

<div class="modal fade" id="group_form" data-backdrop="static" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
         <div class="modal-content">
              <div class="modal-body">
                 <select id="status" class="form-control">
                     <option value="1">Active</option>
                     <option value="0" >Disabled</option>
                     <option value="2" >Custom</option>
                 </select>
              </div>
              <div class="modal-footer">
                   <button type="button" class="btn btn-primary save_button add_group"><i class="fas fa-save" aria-hidden="true"></i><span id="save_button_span"> Add</span></button>
                   <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fas fa-window-close" aria-hidden="true"></i> Cancel</button>
              </div>
         </div>
    </div>
</div>

Steps:

  1. After clicking modal select "Custom"
  2. Close modal
  3. Re-open Modal
  4. The "Custom" is still selected instead of the first "Active"

How to reset selected option or make it to default again after I close then reopen again the modal in JS?

I tried to add $("#status").val(''); or $("#status").val('0'); and I also tried to add selected="" on the html and still nothing

laravel html php javascript
3 Answers

Reset value of select option on Bootstrap modal hidden event

$("#group_form").on("hidden.bs.modal", function () {
   //reset values here. eg
   $(document).find("#status").val('0')
   //or
   $("#status").val('0');
});
user_25012140

Use this method to select:

$(document).find("#status").val('0')
user_132930600 
// Regular Javascript : 
document.getElementById('status').selectedIndex = 0

// jquery :
$('#status').prop('selectedIndex', 0);
Admin1
Related