2013-08-12 1 views
0

Ниже приведен сокращенный код для людей, чтобы выбрать час, минуту и ​​день во временном интервале. Существует более 1 временной интервал для людей, которые выбирают и вводят значения даты.Как использовать jQuery для сброса двух последовательных списков выбора после одного нажатия?

Я хочу написать jQuery для сброса двух списков выбора к первой опции в одно и то же время (например, сброс как Hour, так и Min to option value = "", а также очистка информации, введенной в поле ввода, нажатием кнопки Delete . кнопка (с 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); 
}); 

Этот код работает, удаляет информацию в поле ввода (Дата как календарь), а также параметр выбора для списка выбора часов, но опция в списке выбора Min не сбрасывается.

Класс Start_text_dropdown_box_mini не использовался для сброса как Hour, так и Min. Это потому, что код предназначен для одного из 10 временных интервалов в форме. Каждый временной интервал имеет кнопку удаления рядом с ним. Каждый клик сбрасывает значения часа/мин/даты только в 1 временной интервал. Если используется класс Start_text_dropdown_box_mini, один щелчок по 1 кнопке возврата сбросит все значения во всех десяти временных слотах.

Как добавить новую строку кода jQuery, чтобы сбросить как списки выбора Hour, так и Min с помощью кнопки удаления?

Спасибо!

+1

$ ("# selectID") пустой() опустеют список.. – maverickosama92

+0

@ maverickosama92: опорожнение списков здесь не поможет. Он просто хочет переустановить первые элементы списка и очистить ввод. –

+0

Странно, что теперь вы предпочитаете более медленный более сложный ответ *, сделанный 30 минут спустя *, но это ваш выбор. –

ответ

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/ я надеюсь, что это помогает

+0

Хорошие предложения. Спасибо. – Kar

0

Сначала вы должны указать идентификаторы для первого и второго списка выбора. Затем, используя идентификатор вы можете сделать так $ («# IDofSelectList вариант»). Эк (0) .attr («выбран», «выбрано») надеюсь, что это поможет вам ...

+1

На самом деле вам не нужны идентификаторы, так как вы можете найти общий родительский элемент и сбросить все выборки внутри этого div. Он был близок с использованием родителя для ввода. –

+0

Благодарим за предложение. – Kar

1

Вы были близки начать с. Вы можете использовать Вал, а также для отдельных списков (оба ваших списки имеют пустое первое значение) Попробуйте это:

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

Он находит ближайший родительский Див (класс service_time_slot_input), то найти выбираешь в пределах тех же дел.

parent и closest выполните аналогичную работу в зависимости от того, насколько вероятно, что ваша структура изменится. Я обычно перехожу с closest и нацеливаю на определенного родителя. Затем вы можете использовать find для более глубоких поисков. Показаны примеры обоих стилей.

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

JSFiddle для тестирования http://jsfiddle.net/bRsZT/2/ имеет несколько элементов управления, которые сбрасываются отдельно.

+0

Это очень полезно. Спасибо. – Kar

 Смежные вопросы

  • Нет связанных вопросов^_^