Question

我有一张桌子。我使用jquery动态地向表中添加行。每行有3个选择标记。我想将第三个选项的值设置为与所选的第二个选项相同。

这是我的代码：

$('#table tr').each(function () {
    $(this).find('select:eq(1)').change(function () {

        var selectedVal = $("#table").find('select:eq(1)').val();
        $('#table').find('select:eq(2)').val(selectedVal);

    });
});

但我的问题是它只适用于一行。我的代码有什么问题？

JSFiddle

Answer 1

委托事件并用作选择器tr td:nth-child(2) select：

$('#table').on('change', 'tr td:nth-child(2) select', function () {
     $(this).closest('tr').find('select:eq(2)').val(this.value);
 });

-jsFiddle-

Answer 2

将Event Delegation用于动态事件。

$('#table').on('change', 'tr select:nth-child(1)',function() {   
    //traverse to  the parent row
    var tr = $(this).closest('tr');

    //Find the second select
    var secondSelect = tr.find('select:eq(2)');

    //Set value
    secondSelect.val($(this).val());
});

DEMO

Answer 3

首先关闭：

var selectedVal = $("#table").find('select:eq(1)').val();

应该是：

var selectedVal = $(this).find('select:eq(1)').val();

否则你只能获得第一行的选择...

但可能更好一点：

 $('#table tr').each(function(iter, elem) {                                     
     $(elem).find('select:eq(1)').change(function(){

         var selectedVal=$(this).val();
         $('#table').find('select:eq(2)').val(selectedVal);

    });
});

使用jquery根据第一个选项设置第二个选项值

3 个答案:

-jsFiddle-