Question

我想根据第一个Select Box值创建两个Select Box的克隆，每个值的自动递增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>');

            }

        });

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

1 个答案: