如何使用 jquery 更改我的克隆下拉列表的 ID答案

【问题标题】：How can I change the ids of my cloned dropdown list with jquery如何使用 jquery 更改我的克隆下拉列表的 ID
【发布时间】：2013-01-08 18:41:21
【问题描述】：

我在 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 完全陌生，我正在寻求任何建议或帮助。

【问题讨论】：

标签： javascript jquery html clone

【解决方案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");
  });

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

【讨论】：

是的，但它不会更改所有新名称的名称。我需要，如果我点击添加按钮 10 次，将有 11 个不同的 ID（10 个新 ID 加上原来的 ID）。
太棒了:)。非常感谢。我今天和昨天一直在尝试解决这个问题，但我最终绝望了。幸运的是，我发现了 stackoverflown。再次感谢！
@RyanMarkCamilleri 很高兴，欢迎来到 SO。不要忘记投票并标记为正确。

【解决方案2】：

我想你在关注这个：http://jsfiddle.net/ehQan/

$("#addbt").click(function () {
    $('#choice').clone().attr( 'id', 'choices_' +$(this).index()).insertAfter("#choice");
});

【讨论】：

$(this).index() 不是一个好的解决方案。如果将更多元素添加到同一个父级会怎样？

【解决方案3】：

您可以在插入之前使用 jQuery attr() 方法更改 id：

<script type="text/javascript">

    $("#addbt").click(function () {
        $('#choice').clone().attr('id','Your new id').insertAfter("#choice");
    });

</script>

【讨论】：

是的，但它不会更改所有新名称的名称。我需要，如果我点击添加按钮 10 次，将有 11 个不同的 ID（10 个新 ID 加上原来的 ID）。
@Jai：我想我们是同时输入的，只是花了更长的时间。现在看来问题已经得到解答。

【解决方案4】：

使用此代码，您可以根据需要多次按下按钮：

<script type="text/javascript">

  var times = 0;
  $("#addbt").click(function () {
    times++;
    $('#choice').clone().attr( 'id', 'choices_' + times ).insertAfter("#choice");
  });

</script>

【讨论】：

谢谢 :) 已经看起来更好了。有没有办法知道这些数字？比如#Choices_00、#Choices_01、#Choices_02 等等？
您可以声明一个变量：var times = 0; 然后使用而不是 Date 部分。不要忘记在点击事件中增加变量的值。
它是：$('#choice').clone().attr( 'id', 'choices_' + times).insertAfter("#choice");。我不建议使用全局变量，但它可以解决问题。
@Jai 的回答好多了，看看吧。