如何使用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, 
..... ..... ...... 

也房間allot- row as 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>'); 

      } 

     });