0

以下は、タイムスロットで時、分、日を選択するための短縮コードです。ユーザーが日時の値を選択して入力できるタイム スロットは複数あります。

同時に 2 つの選択リストを最初のオプションにリセットする jQuery を作成したいと考えています (つまり、Hour と Min の両方を option value="" にリセットし、[削除] ボタンを押して入力ボックスに入力された情報をクリアします (丸ボタンの X) とクラス .Del-btn.

次のコードを確認してください。

 <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>

私はこのjQueryコードを書きました：

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

このコードは、入力ボックス (カレンダーとしての日付) の情報と、時間選択リストの選択オプションを削除しますが、最小選択リストのオプションはリセットされません。

クラス Start_text_dropdown_box_mini は、Hour と Min の両方をリセットするために使用されませんでした。これは、フォーム内の 10 のタイム スロットの 1 つに対するコードであるためです。各タイムスロットの横には削除ボタンがあります。クリックするたびに、時間/分/日付の値が 1 つのタイム スロットのみでリセットされます。クラス Start_text_dropdown_box_mini が使用されている場合、リセット ボタンを 1 回クリックすると、10 個のタイム スロットすべてのすべての値がリセットされます。

jQuery コードの新しい行を追加して、削除ボタンをクリックするだけで Hour と Min の両方の選択リストをリセットするにはどうすればよいですか?

ありがとう！

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

http://jsfiddle.net/bRsZT/2/をテストする JSFiddle には、個別にリセットする複数のコントロールがあります。

于 2013-08-12T12:46:44.863 に答える
0

最初に、最初と 2 番目の選択リストに ID を指定する必要があります。次に、IDを使用して、 $("#IDofSelectList option").eq(0).attr("selected", "selected") を行うことができます...

于 2013-08-12T12:00:54.423 に答える