如何在單獨選擇時進行更改，同時有很多選擇

我有一個表單，它有很多下拉菜單。用戶選擇一個選項並出現相關的文本框。我使用.delegate()來獲得select s上的每個更改。但是，當用戶更改說第三個，所有選擇同時更改，如何在單獨選擇時進行更改，同時有很多選擇

$(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，所以我找不到解決方案。

來源

2012-02-28 teutara

的ID必須是唯一的 – 2012-02-28 07:57:46

嘗試用唯一的ID。 – 2012-02-28 07:58:42

僅供參考，.delegate現在被jQuery 1.7中的.on方法取代。 – 2012-02-28 08:03:13

此：

$("input")

比賽頁面上的所有<input>元素。這就是爲什麼$("input").hide()隱藏所有這些。你想要更多的東西是這樣的：

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

只工作與<input> S中的含<div>當前的內部。

此外，您的<select>使用「one」和「two」作爲值，但您的類是「第一」和「第二」。我想你想你的<select> s到看上去就像這樣：

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

而且你應該做的事重複id="new"屬性。

你也有$(":button").show()，但沒有按鈕。

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

來源

2012-02-28 08:17:36

謝謝，我有添加額外div的按鈕。我確實看過你的小提琴，但第二個改變不會影響選擇。如何解決？（我現在正在嘗試你的.closest建議） – teutara 2012-02-28 08:26:18

謝謝「mu太短」..選擇最接近的div幫助..乾杯！ – teutara 2012-02-28 08:47:02

您的選擇菜單具有相同的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

應該做你想要的。

來源

2012-02-28 07:58:54 Ohgodwhy

謝謝Ohgodwhy，但我沒有抓住這一切。 – teutara 2012-02-28 08:07:42

如何在單獨選擇時進行更改，同時有很多選擇

回答

相關問題