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");
  });

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

Answer 2

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

<script type="text/javascript">

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

</script>

Answer 3

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

<script type="text/javascript">

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

</script>

Answer 4

我想你是这样的：http: //jsfiddle.net/ehQan/

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