Question

为我的表单找到了完美的小脚本。它将select的值添加到文本框中。

<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[]" />

发生的事情是，第一个Select工作，但第二个没有。

如果我添加第三个Select和Text，则第二个Select会更改第三个Text而第三个Select不会执行任何操作。

有什么想法吗？

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属性来查找所需的输入元素。

文本框中填充了选择值不起作用

2 个答案: