0

用jquery遇到了一点砖墙，我目前有以下代码：

http://jsfiddle.net/uSLhb/1/

克隆方法是：

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

如您所见，我已对其进行了设置，因此您可以轻松地克隆该行。

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

想知道有没有人能帮我找到解决办法，谢谢！

4

2 回答 2

1

这里的工作示例- 我不得不使用 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;
});
于 2013-02-21T18:38:55.800 回答
1

您面临的问题发生了，因为您使用 ID 进行选择。ID在一个页面中必须是唯一的，否则你会遇到麻烦。如果您正在克隆带有 id 的 select，则该 id 也将被克隆，从而生成无效文档。

看看我在 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 更改为类并更改了更改处理程序，因为这是您的第二个问题。

事件处理程序绑定到选定的元素，而不是您之后添加的元素。这是事件委托的正确用例，当处理程序绑定到父级并在此示例中捕获来自子选择元素的更改事件时，无论何时将其添加到 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是我添加到连续第一个选择的类。因此，以后添加的元素的每一个更改也将被处理。在处理程序中，我将行为更改为仅影响实际的表行，而不是整个表。

于 2013-02-21T19:05:19.277 回答