Monday, 12 August 2013

How to use jQuery to reset two consecutive select lists after one click?

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