Question

使用jquery运行到一个砖墙，我目前有以下代码：

克隆方法是：

$("#addMore").click(function() {
    $('.user_restriction:last').clone().insertAfter(".user_restriction:last");
    return false;
});

正如您所看到的，我已将其设置为可以轻松克隆该行。

我面临的问题是在新克隆元素中显示正确的选择列表（在“字段”列中），具体取决于他们从行的第一个选择（在“表格”列中）字段中选择的字段。

想知道是否有人可以帮我找到解决方案，谢谢！

Answer 1

Working example here - 我不得不使用jsbin作为小提琴正在播放！

克隆不会保持所选状态，因此您需要在克隆之前获取该值并在之后进行设置。

您的点击现在变为：

$("#addMore").click(function() {
   var value = $('.user_restriction:last').find('select').val(); 
  $('.user_restriction:last').clone().insertAfter(".user_restriction:last");

        //alert(value);
$('.user_restriction:last').find('select').val(value);
    return false;
});

Answer 2

您遇到的问题出现了，因为您使用的ID是您的选择。 ID 必须在页面中是唯一的，否则您将遇到麻烦。如果您正在克隆带有id的select，那么id也将被克隆，从而产生无效的文档。

Have a look at the example I created on JsBin

标记：

<tr class="user_restriction">
    <td>
        <select name="table[]" class="userselect">
            <option value="" selected>---</option>
            <option value="members">Members</option>
            <option value="staff_positions">Staff Positions</option>
        </select>
    </td>
    <!-- and so on, basically just changed ids to classes -->            
</tr>

我将所有ID更改为类并更改了更改处理程序，因为这是您的第二个问题。

事件处理程序绑定到所选的元素，而不是之后添加的元素。这是事件委派的正确用例，当处理程序绑定到父级并在本示例中捕获来自子select元素的change事件时，无论它何时被添加到DOM。

使用jQuery，这是实现此目的的一种方法：

$('table.table').on('change', '.userselect', function() {

    var activeRow = $(this).parents('tr');

    activeRow.find('td').eq(1).find('select').hide();

    if(this.value.length === 0){
        activeRow.find('td').eq(1).find('select').eq(0).show();
    }else{
        activeRow.find("." + this.value).show();
    }

});

处理程序绑定到您的table - 元素，.userselect是我添加到行中第一个选择的类。因此，稍后添加的元素的每个更改也将被处理。在处理程序中，我将行为更改为仅影响实际的表行，而不是整个表。

在Jquery中克隆表行

2 个答案: