How to use jQuery to reset two consecutive select lists after one click?
The following is a shortened code for people to select hour, minute and
day in a time slot. There are more than 1 time slot for people to select
and enter date time values into.
I want to write a jQuery to reset two select lists to the first option at
the same time (i.e. resetting both Hour and Min to option value="", also
clearing information typed into the input box, by pressing the Delete
button (with a X in a circle button) with the class .Del-btn.
Check out the following code:
<div class="service_time_slot_input" id="timeslot2" style="display:none">
<select name="adv_service_slot_hour2" class="Start_text_dropdown_box_mini">
<option value="">Hour</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="22">22</option>
<option value="23">23</option>
</select>:
<select name="adv_service_slot_min2" class="Start_text_dropdown_box_mini">
<option value="">Min</option>
<option value="00">00</option>
<option value="05">05</option>
<option value="50">50</option>
<option value="55">55</option>
</select><input type="text" name="adv_service_slot_date2"
class="datepicker advanced_service_shortbox" placeholder="Date2"><button
type="button" id="delete2" class="Del-btn btn-danger">X</button><button
type="button" class="btn btn-primary btn-small"
id="add_more2">Add</button></div>
I wrote a jQuery code:
$('.Del-btn').click(function() {
$(this).parent().find('input').val('');
$(this).parent().find('select option:first').prop('selected',true);}
This code works in deleting the information at the input box (Date as a
calendar), as well as the select option for the Hour select list, but the
option in the Min select list is not reset.
The class Start_text_dropdown_box_mini was not used to reset both Hour and
Min. It is because the code is for one of the 10 time slots in the form.
Each time slot has a delete button next to it. Each click resets the
hour/min/date values in 1 time slot only. If the class
Start_text_dropdown_box_mini is used, one click in 1 reset button will
reset all the values in all of the 10 time slots.
How to add a new line of jQuery code to make it reset both the Hour and
Min select lists with a click of the delete button?
Thanks!
No comments:
Post a Comment