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。

<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

您的选择菜单具有相同的ID。将ID的值更改为每个菜单的唯一值，您将获得解决方案。

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

这些选择列表具有相同的ID。所有与它们相关的Javascript都会影响它们。更改其中一个ID值，或使用类，例如

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

现在应该做你想做的事。

Answer 2

此：

$("input")

匹配页面上的所有<input>元素。这就是$("input").hide()隐藏所有这些内容的原因。你想要更像这样的东西：

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

仅适用于当前包含<input>的{{1}}。

此外，您的<div>使用＆＃34;一个＆＃34;和＆＃34;两个＆＃34;对于价值观，你的班级是＆＃34;第一＆＃34;和＆＃34;第二＆＃34;。我想你希望你的<select>看起来更像这样：

<select>

您应该对重复的<select id="new"> <option value="first">one</option> <option value="second">two</option> </select>属性执行一些操作。

你也有id="new"，但看不到任何按钮。

演示以上修正：http://jsfiddle.net/ambiguous/9fsc5/

如何选择单独选择，同时有很多选择

2 个答案: