如何使用jQuery创建具有自动递增ID的下拉列表的克隆

Question

我想根据第一个“选择框”值创建两个“选择框”的克隆，每个值具有自动递增的ID。 这是我的HTML代码。

First Step (Total Rooms)
-----------------------------------
<div class="row">
 <div class="col-md-7">
   <select name="select" id="total_rooms" class="form-control">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
   </select>
 </div>
</div>

Second Step (Rooms Allotment)
-----------------------------------
<div id="room-allot-row" class="row">
 <div class="col-md-7">
   <div class="row">
      <div class="col-sm-4">
         <input type="text" id="setro" class="form-control" value="" readonly>
      </div>
      <div class="col-sm-4">
         <select name="select" id="adults" class="form-control" name="adults">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
         </select>
      </div>
      <div class="col-sm-4">
         <select name="select" id="kids" class="form-control" name="adults">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
         </select>
      </div>
   </div>
 </div>
</div>

如果我在total_rooms = 3上选择值，则将为上述“ html和setro”添加三行用于“房间分配”，成人，儿童ID将设置为-

setro_1, adults_1,kids_1, 
setro_2, adults_2, kids_2,
setro_3, adults_3, kids_3,
..... ..... ......

还将room-allot-row设置为room-allot-row-1, room-allot-row-2, room-allot-row-3

我相信它可以在jquery中。

我使用了以下代码：

$('#sroom').on('change', function(){
            var max = $(this).find(":selected").val();
            var r = 0;
            $('.room-group').empty();
            for (var i=0; i<max; i++){
                r++;
                $(".room-group").append('<div id="room-allot-row-'+r+'" class="row"><div class="col-sm-4"><label class="control-label">Room No</label><input type="text" name="roomno-'+r+'" class="form-control" value="'+r+'" readonly></div><div class="col-sm-4"><label for="rooms" class="control-label">Adults</label><select id="adults-'+r+'" class="form-control" name="adults-'+r+'"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select><span class="help-block">12+ Yrs.</span></div><div class="col-sm-4"><label for="rooms" class="control-label">Kids</label><select name="kids-'+r+'" id="kids-'+r+'" class="form-control"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><span class="help-block">12+ Yrs.</span></div></div>');

            }

        });

我如何使用jQuery。

Answer 1

谢谢大家。 我已经完成以下操作：

$('#sroom').on('change', function(){
            var max = $(this).find(":selected").val();
            var r = 0;
            $('.room-group').empty();
            for (var i=0; i<max; i++){
                r++;
                $(".room-group").append('<div id="room-allot-row-'+r+'" class="row"><div class="col-sm-4"><label class="control-label">Room No</label><input type="text" name="roomno-'+r+'" class="form-control" value="'+r+'" readonly></div><div class="col-sm-4"><label for="rooms" class="control-label">Adults</label><select id="adults-'+r+'" class="form-control" name="adults-'+r+'"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select><span class="help-block">12+ Yrs.</span></div><div class="col-sm-4"><label for="rooms" class="control-label">Kids</label><select name="kids-'+r+'" id="kids-'+r+'" class="form-control"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><span class="help-block">12+ Yrs.</span></div></div>');

            }

        });