javascript - 如何使用 jquery 更改克隆下拉列表的 id

Question

我在 php 中有以下下拉列表:

<select id="choice" name="choice" style="width: 121px">
    <?php 
    foreach($xml->children() as $pizza){
    ?>
    <option value="<?php echo $pizza; ?>" selected=""><?php echo $pizza; ?></option>
    <?php }?>
</select><input TYPE = "button" id="addbt" Name = "addbt" VALUE = "Add Pizza">

我正在使用以下 Jquery:

<script type="text/javascript">

  $("#addbt").click(function () {
     $('#choice').clone().insertAfter("#choice");
  });

</script>

我正在尝试克隆附加到 xml 文件的下拉列表(我一直管理到这里)并添加必要的 Jquery，以便每个新的下拉列表克隆都有一个新的 id(单个数字差异就足够了。类似choices_00然后choices_01等等)。

由于我对 Jquery 和 php 完全陌生，所以我寻求任何建议或帮助。

Answer 1

 $("#addbt").click(function () {
     $('#choice').clone()
         .attr('id', 'newid')
         .attr('name', 'newname')
         .insertAfter("#choice");
  });

为了确保每次都能获得新的名称和 ID，请考虑将类名添加到选择中，以便您可以计算存在的数量。

HTML:

<select id="choice" name="choice" class="ddl" style="width: 121px">
    <?php 
    foreach($xml->children() as $pizza){
    ?>
    <option value="<?php echo $pizza; ?>" selected=""><?php echo $pizza; ?></option>
    <?php }?>
</select>

JS:

 $("#addbt").click(function () {
     $('#choice').clone()
         .attr('id', 'choice' + $('.ddl').length)
         .attr('name', 'choice' + $('.ddl').length)
         .insertAfter(".ddl:last");
  });

否则，使用全局变量(呃)或数据属性跟踪按钮被单击的次数。