选择 jquery 库在复制并追加到另一行时不起作用

Question

在 table 中，我有 1 行在不同的单元格中有两个多个 select 标签。两者都使用选择的 Jquery 库，我想在用户单击“添加行”时克隆该行并附加到相同的 table.

但是，Chosen Jquery 库在克隆行中不起作用。它已经添加了选择的标签，但没有在浏览器中显示。

编辑：这是我的函数，我在其中克隆行并附加到最后一行的相同 table。

$(document).ready(function() {
  $(".chosen-select").chosen();
});

function addRow() {
  $("#item_table tbody tr:last").clone().appendTo($("#item_table tbody"));
    $("#item_table tbody tr:last .chosen-select").chosen();
    $("#item_table tbody tr:last .chosen-select").trigger("chosen:updated");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>

<div>
  <button onclick="addRow()">Add Row</button>
  <table id="item_table">
    <thead>
      <tr>
        <td>Title</td>
        <td>Day</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" name="title" /></td>
        <td>
          <select name="day" multiple class="chosen-select" data-placeholder="Please select">
            <option value="1">Monday</option>
            <option value="2">Tuesday</option>
            <option value="3">Wednesday</option>
            <option value="4">Thursday</option>
            <option value="5">Friday</option>
            <option value="6">Saturday</option>
            <option value="7">Sunday</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

对于work Dropdown，你只需要在克隆之前为每个元素创建一个唯一的id

 clone.find("#select"+prev).attr("id", "select"+i);

并删除之前选择的克隆记录

clone.find("#select"+prev+"_chosen").attr("id", "select"+i+"_chosen1");
document.getElementById("select"+i+"_chosen1").outerHTML=""

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.rawgit.com/harvesthq/chosen/gh-pages/chosen.min.css" rel="stylesheet"/>
<script>
$(document).ready(function() {
  $("#select0").chosen();
});
var i=1;
var prev =0;
function addRow() {
 var clone = $("#item_table tbody tr:last").clone()
 clone.find("#txtinput"+prev).attr("id", "txtinput"+i);
             clone.find("#select"+prev).attr("id", "select"+i);
            clone.find("#select"+prev+"_chosen").attr("id", "select"+i+"_chosen1");
 clone.appendTo($("#item_table tbody"));
document.getElementById("select"+i+"_chosen1").outerHTML=""
$myid = $('#select' + i);
$myid.show().chosen();
     i++;
     prev++;
}
</script>
</head>
<body>

<div>
  <button onclick="addRow()">Add Row</button>
  <table id="item_table">
    <thead>
      <tr>
        <td>Title</td>
        <td>Day</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" name="title" id="txtinput0" /></td>
        <td>
          <select name="day" multiple class="chosen-select" id="select0" data-placeholder="Please select">
            <option value="1">Monday</option>
            <option value="2">Tuesday</option>
            <option value="3">Wednesday</option>
            <option value="4">Thursday</option>
            <option value="5">Friday</option>
            <option value="6">Saturday</option>
            <option value="7">Sunday</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

选择 jquery 库在复制并追加到另一行时不起作用

Chosen jquery library not working when copy and append to another row

html

jquery

select

clone

jquery-chosen