文本框填充選擇值不起作用

Question

爲我的表單找到了完美的小腳本。它將選擇的值添加到文本框中。

<script type='text/javascript'> 
//<![CDATA[ 
(window).load(function(){ 
$("select[name='type[]']").change(function() { 
$("input[name='tvalue[]']").eq($(this).index()).val(this.value); 
}).change(); 
}); 
/]]> 
</script> 

這是蹭。 有人可以解釋爲什麼這工作：

<select name="type[]"> 
    <option value="1">One</option> 
    <option value="2" selected="selected">Two</option> 
</select> 

<select name="type[]"> 
    <option value="1" selected="selected">One</option> 
    <option value="2">Two</option> 
</select> 

<input type="text" name="tvalue[]" id="tvalue[]" /> 
<input type="text" name="tvalue[]" id="tvalue[]" /> 

但是，這不？ （當然，這是我所需要的佈局。）：

<select name="type[]"> 
    <option value="1">One</option> 
    <option value="2" selected="selected">Two</option> 
</select> 

<input type="text" name="tvalue[]" id="tvalue[]" /> 

<select name="type[]"> 
    <option value="1" selected="selected">One</option> 
    <option value="2">Two</option> 
</select> 

<input type="text" name="tvalue[]" id="tvalue[]" /> 

發生了什麼事，在第一選擇的作品，但第二個沒有。

如果我添加第三個選擇和文本，第二個選擇更改第三個文本，第三個選擇不做任何事情。

有什麼想法？

Answer 1

嘗試使用.each()：

$(window).load(function(){ 
    $("select[name='type[]']").each(function() { 
     $(this).change(function() { 
      $("input[name='tvalue[]']").eq($(this).index()).val(this.value); 
     }).change(); 
    }); 
}); 

Answer 2

我認爲這個問題可能與您輸入的ID。他們確實應該是獨一無二的，我記得括號也是一個不錯的選擇。我不確定爲什麼它有時會在某些佈局中起作用。我可能會猜測索引在你的第二個佈局中被重置，而在第一個佈局中，它不是 - 因此，你的.eq（）能夠在第一個佈局中找到第二個匹配，而不是第二個匹配。

一種解決這個問題的方法？我可能會將相關的選擇元素和輸入元素的名稱配對，並讓所有選擇共享一個類。在頂級選擇器中使用該類，並使用「this」的name屬性來查找所需的輸入元素。