Блог

Главная - Вопросы по программированию - как получить следующий относительный выпадающий список с помощью jquery

как получить следующий относительный выпадающий список с помощью jquery

#jquery #jquery-selectors #css-selectors

#jquery #jquery-селекторы #css-селекторы

Вопрос:

у меня есть этот код

 <div id="aggregate" style="display:inline">
                    <%=Html.RadioButton("a", "1", true, new {id = "meRadio"})%><label>Me</label>
                    <%=Html.RadioButton("a", "2", false, new { id = "teamRadio" })%><label>Team: </label><% = Html.DropDownList("Teams", Model.Teams,  new {@scope="Team",  @id = "teamDropdown", @class = "filterDropdown" })%>
                    <%=Html.RadioButton("a", "4", false, new { id = "managerRadio" })%><label>Manager: </label><% = Html.DropDownList("Managers", Model.People, new { @scope = "Manager", @id = "managerDropdown", @class = "filterDropdown" })%>
                    <%=Html.RadioButton("a", "5", false, new { id = "locationRadio" })%><label>Location: </label><% = Html.DropDownList("Locations", Model.Locations, new { @scope = "Location", @id = "locationDropdown", @class = "filterDropdown" })%>
  </div>

в настоящее время у меня есть такой код:

  $('#workstreamRadio').click(function () {
     Enable("#workstreamDropdown");
 });

 $('#teamRadio').click(function () {
     Enable("#teamDropdown");
 });

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

каков синтаксис для выражения «дайте мне селектор выпадающего списка справа от переключателя, который я нажал»

Ответ №1:

Вы можете сделать это, используя .nextAll() и :first вот так:

 $("#aggregate :radio").change(function() {
  var dropdown = $(this).nextAll("select:first");
  //enable or disable dropdown
});

поскольку они являются родственными, используйте .nextAll() который проходит через все родственные элементы, и вам нужен первый <select> элемент, поэтому выберите его из родственных элементов после нажатия кнопки radio. Также посмотрите на использование .change() here вместо .click() , оно сработает только при изменении выбора, что обычно является тем, что вы хотите здесь.

Комментарии:

1. будет ли это обрабатывать первую запись, у которой нет выпадающего списка. я только хочу, чтобы это применялось ко всем другим переключателям, кроме первого, поскольку первый имеет немного другую логику. я думал о том, чтобы иметь атрибут class для всех переключателей, кроме первого, чтобы решить эту проблему.

2. @ooo — Вы можете изменить селектор для привязки, изменить $("#aggregate :radio") на $("#aggregate :radio:gt(0)") , чтобы игнорировать первое радио, и оно не будет привязано 🙂

3. почему nextAll('select:first') и нет next('select') ?

4. @Alexander — .next() находит только самый следующий элемент, если он соответствует selector…it не продолжает поиск, пока не найдет его, это немного нелогично.