0

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 this jQuery code:

$('.Del-btn').click(function() {
    $(this).parent().find('input').val('');
    $(this).parent().find('select option:first').prop('selected',true);
});

This code works deletes the information in 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!

4

3 回答 3

1

你一开始就很接近。您也可以将 val 用于选择列表（您的两个列表都有一个空白的第一个值）试试这个：

$('.Del-btn').click(function () {
    $(this).parent().find('input').val('');
    $(this).closest('.service_time_slot_input').children('select').val('');
});

它找到最近的父 div（类 service_time_slot_input），然后在同一个 div 中找到选择。

parent并closest根据您的结构发生变化的可能性做类似的工作，我通常会选择closest并针对特定的父母。然后，您可以使用 find 进行更深入的搜索。显示了两种样式的示例。

$('.Del-btn').click(function () {
    $(this).parent().find('input').val('');
    $(this).parent().find('select').val('');
});

JSFiddle 测试http://jsfiddle.net/bRsZT/2/有多个单独重置的控件。

于 2013-08-12T12:46:44.863 回答
0

首先，您必须为第一个和第二个选择列表提供 ID。然后使用 id 你可以这样做 $("#IDofSelectList option").eq(0).attr("selected", "selected") 希望它能帮助你...

于 2013-08-12T12:00:54.423 回答
0

尝试以下：

$('.Del-btn').click(function() {
  $(this).parent().find('input').val('');

  //Or
  //$('.Start_text_dropdown_box_mini').each(function(){
  //  $(this).children("option:first").prop("selected",true);
  //});

  $(this).parent().find('.Start_text_dropdown_box_mini').each(function(){
    $(this).children("option:first").prop("selected",true);
  });
});

在这里工作小提琴：http: //jsfiddle.net/bMXdb/1/ 我希望它有所帮助

于 2013-08-12T13:16:35.470 回答