Как изменить выбор по отдельности, в то время как есть много вариантов выбора

Question

У меня есть форма, что есть много выпадающих меню.Пользователь выбирает опцию, и появляются соответствующие текстовые поля.Я использовал .delegate(), чтобы получить каждое изменение на select с.Но когда пользователь изменяет, скажем, 3-й, все выборки изменяются одновременно,

$(function() {
        $("#formbody").delegate("select", "change", function(){             
        var type = $(this).find("option:selected").val();
        $("input").hide().filter("." + type).show();
        $(":button").show();
        });
    });

Все выборки динамически добавляются в деления с увеличивающимися идентификаторами.

<div id="div1">
<select id="new">
<option value="one">one</option>
<option value="two">two</option>
</select>
<input class="one" name="first_input"/>
<input class="two" name="second_input"/>
</div>
<div id="div2">
    <select id="new">
    <option value="one">one</option>
    <option value="two">two</option>
    </select>
    <input class="one" name="first_input"/>
    <input class="two" name="second_input"/>
    </div>

Но потому что яЯ не знаю JQuery, как я должен, я не мог найти решение.

Answer 1

Это:

$("input")

соответствует всем <input> элементам на странице. Вот почему $("input").hide() скрывает их всех. Вы хотите что-то еще, как это:

$(this).closest('div').find('input').hide()...

для работы только с <input> s, которые находятся внутри вашего текущего, содержащего <div>.

Кроме того, ваш <select> использует «один» и «два» для значений, но ваши классы «первый» и «второй». Я думаю, вы хотите, чтобы ваши <select> выглядели так:

<select id="new">
    <option value="first">one</option>
    <option value="second">two</option>
</select>

И вы должны что-то сделать с дублирующимися атрибутами id="new".

У вас также есть $(":button").show(), но в поле зрения нет кнопок.

Демо вышеперечисленных исправлений: http://jsfiddle.net/ambiguous/9fsc5/

Answer 2

Меню выбора имеет одинаковый идентификатор.Измените значение идентификаторов, чтобы оно было уникальным для каждого меню, и у вас будет решение.

<select id="new">
  <option value="one">one</option>
  <option value="two">two</option>
  </select>
  .....
  <div id="div2">
    <select id="new">
      <option value="one">one</option>
      <option value="two">two</option>
    </select>

Эти списки выбора имеют одинаковый идентификатор.весь связанный с ними Javascript будет влиять на оба.Измените одно из этих значений идентификатора или используйте классы, такие как

$(".new").delegate(etc, function(){ 
  var thisSelectListValue = $(this).val; //use the select list we interacted with
  //your other code will go here

Должен делать то, что вы хотите сейчас.