Используя jQuery, при изменении раскрывающегося списка мне нужно другое поле ввода, которое требуется при использовании Coldfusion

У меня есть форма, которая выводит системы, назначенные проекту. Системы зациклены, и новые строки могут добавляться динамически, поэтому использование атрибута ID недоступно.

Когда пользователь вносит изменения в раскрывающийся список статуса, мне нужно, чтобы соответствующее поле Дата вступления в силу статуса стало обязательным. Я не знаю, как достаточно хорошо пройти DOM, чтобы найти поле с помощью класса datepicker.

<tr>  
    <th class="form">
        <label>Status</label>
    </th>  
    <td>
        <div style="float:left;">  
        <select class='status' name="status" >  
            <option value="New">New</option>  
            <option value="Existing">Existing</option>  
            and so on...  
        </select>  
        </div>
    </td>  
    <th class="form">
        <label>Status Eff. Date</label>
    </th>  
    <td>
        <div style="float:left;">  
            <input type="text" name="statuseffective" class="datepicker" size="15" >  
        </div>
    </td>  
</tr>

Если это прописано, процесс будет работать следующим образом:
когда пользователь изменяет статус, JS находит следующее поле ввода, содержащее класс .datepicker и addClass('required'), а также устанавливает фокус на это поле (установка фокуса необязательна, так как addClass'required' уже сделал бы поле красным).

Я могу определить, какой раскрывающийся список изменился, я просто не могу перейти к следующему элементу ввода. Любая помощь будет оценена по достоинству.


input jquery next find
person HPWD    schedule 20.04.2011    source источник
comment
решение должно работать в первую очередь для IE. Если решение работает и для FF, это просто дополнительный бонус. Стандарт компании - IE.   -  person HPWD    schedule 20.04.2011
comment
@locrizak даже не заводи меня! :D   -  person HPWD    schedule 20.04.2011

Ответы (2)


arrow_upward
1
arrow_downward 

$('.status').change(function(){
    $(this).next('input.datepicker').addClass("required").focus();
});

Должен сделать трюк.

Обновлять

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

$('.status').change(function(){
    $(this).parents('td').nextAll("td:first").find('.datepicker').focus()
});

Это должно помочь тебе!

person locrizak    schedule 20.04.2011
comment
Это почти идентично тому, что я тоже придумал, но это не работает, что только усиливает мое разочарование. :) $('.status').live("change", function() { $(this).next('.datepicker').addClass("required").focus(); }); - person HPWD; 20.04.2011
comment
@locrizak - я не указал ваше имя в предыдущем комментарии. - person HPWD; 20.04.2011
comment
@dlackey обновил мой ответ решением. Протестировал это, и это работает для меня. - person locrizak; 20.04.2011
comment
@locarizak родительские вещи меня действительно сбивают с толку. Я не понимаю, когда элемент становится родительским или одноуровневым. Я думаю, что если бы я мог освоить это, мне было бы намного легче понять все остальное. У меня просто почему-то ментальный блок. Я собираюсь пообедать, вернусь и немного попробую ваше решение. Свежий взгляд и полный желудок. :D спасибо. - person HPWD; 20.04.2011
comment
Посмотрите на код с отступом, который вы предоставили, dlackey. Ваш выбранный элемент является «дочерним элементом» ‹td›, который его обертывает, который, в свою очередь, является дочерним элементом ‹tr› (который, вероятно, является дочерним элементом ‹table› и т. д.). Это означает, что ‹td›, обернутый вокруг выбранного вами элемента, является родителем. Элемент .datepicker является дочерним элементом совершенно другого ‹td›. Чтобы пройти через DOM, вам нужно убедиться, что вы правильно перемещаетесь по отношениям. Помимо детей и родителей, у вас также есть «братья и сестры», что говорит само за себя. - person Steve Costello; 20.04.2011
comment
@Steve-Costello, это настоящий сценарий с тегами div (или, по крайней мере, рядом - код не так просто разместить в разделе комментариев :)) <div id=parent1> <span>child of parent1 (also a sibling to other span)</span> <span>child of parent1 (also a sibling to other span)</span> <div id=parent2> <span>child of parent2 (also a sibling to other span</span> <span>child of parent2 (also a sibling to other span</span> </div> </div> - person HPWD; 20.04.2011
comment
Я изменил решение для работы с динамически добавляемыми строками: я изменил $('.status').change(function(){ на $('.status').live("change", function() { - person HPWD; 20.04.2011

arrow_upward
1
arrow_downward

Итак, начнем... редактировать мой ответ, так как теперь я вижу, что .datepicker не находится под тем же родителем, что и .status.

$(".status").live("click", function(){ $(this).parent().find('input.datepicker').addClass("обязательно").focus(); )};

person Steve Costello    schedule 20.04.2011
comment
Это новый подход, которого я раньше не видел. К сожалению, это не сработало для меня. - person HPWD; 20.04.2011
comment
Дуур. Это потому, что я не включил часть логики, которую locrizak включил выше... обнаружение фактического изменения элемента '.status'. Его/ее код должен работать просто денди. - person Steve Costello; 20.04.2011
comment
@ steve-costello Я раньше не видел, чтобы два класса объединялись знаком +. Можете ли вы объяснить, что это делает? - person HPWD; 20.04.2011
comment
Согласно api.jquery.com/next-adjacent-Selector, он выбирает следующий соседний соответствующий элемент. Предостережение здесь заключается в том, что они все еще должны быть внутри одного и того же родителя. - person Steve Costello; 20.04.2011
comment
Смотрите мой новый ответ ... Я только что увидел с вашим последним изменением кода, что .datepicker не находится в том же родительском элементе, что и элемент .status. Новый код, который я предоставил, должен работать. - person Steve Costello; 20.04.2011