Modal:

<div  id="group_form" data-backdrop="static" role="dialog" aria-hidden="true">
    <div  role="document">
         <div >
              <div >
                 <select id="status" >
                     <option value="1">Active</option>
                     <option value="0" >Disabled</option>
                     <option value="2" >Custom</option>
                 </select>
              </div>
              <div >
                   <button type="button" ><i  aria-hidden="true"></i><span id="save_button_span"> Add</span></button>
                   <button type="button"  data-dismiss="modal"><i  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

CodePudding user response：

Use this method to select:

$(document).find("#status").val('0')

CodePudding user response：

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');
});

CodePudding user response：

#Javascript : 

document.getElementById('status').selectedIndex = 0

#jquery : 

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