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:
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
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');
});
Use this method to select:
$(document).find("#status").val('0')
// Regular Javascript :
document.getElementById('status').selectedIndex = 0
// jquery :
$('#status').prop('selectedIndex', 0);