Jquery追加div取决于选择下拉列表

Question

我想在这里创建这个选项..用户可以选择他想要的房间数。

当他选择我随JQuery附加他选择的房间数量时。

然后他可以选择每个房间里会有多少成人和儿童。但是当他选择孩子时，我想附加另一个选择（孩子的年龄）取决于孩子的数量。

正如你所看到的，我可以添加房间但是对于孩子我会遇到所有问题。

1.）当我添加孩子的数量时，我无法将其追加到特定的div上。并且子选项仅适用于第一个。

2.）我试图隐藏像房间一样的儿童年龄盒，但我无法使它工作。

任何关于我做错的反馈都会有所帮助。

由于

所以这是我的代码

＆＃13;

＆＃13;

$(document).ready(function() {
  //onchange of rooms-count
  $('#search_rooms_select').change(function() {
    var roomsSelected = $('#search_rooms_select option:selected').val();
    var roomsDisplayed = $('[id^="room-"]:visible').length;
    var roomsRendered = $('[id^="room-"]').length;

    //if room count is greater than number displayed - add or show accordingly
    if (roomsSelected > roomsDisplayed) {
      for (var i = 1; i <= roomsSelected; i++) {
        var r = $('#room-' + i);
        if (r.length == 0) {
          var clone = $('#room-1').clone(); //clone
          clone.children(':first').text("Room: ");
          //change ids appropriately
          setNewID(clone, i);
          clone.children('div').children('select').each(function() {
            setNewID($(this), i);
          });
          $(clone).insertAfter($('#room-' + roomsRendered));
        } else {
          //if the room exists and is hidden 
          $(r).show();
        }
      }
    } else {
      //else if less than room count selected - hide
      for (var i = ++roomsSelected; i <= roomsRendered; i++) {
        $('#room-' + i).hide();
      }
    }
  });

  function setNewID(elem, i) {
    oldID = elem.attr('id');
    newId = oldID.substring(0, oldID.indexOf('-')) + "-" + i;
    elem.attr('id', newId);
  }

  $('[id^="children-"]').change(function() {

    var kidsSelected = $('[id^="children-"] option:selected').val();

    for (i = 1; i <= kidsSelected; i++) {
      var htmlChildren = "<div class='col-xs-4 col-md-4 col-sm-4'><span class='labelselect'>Child 1</span><select class='form-control' id='childrenage" + i + "'><option>0</option><option>1</option><option>2</option><option>3</option><option>4</option></select></div> ";
      $(".childrendiv").append(htmlChildren);
    }
    var kidsDisplayed = $('[id^="childrenage-"]:visible').length;
    var kidsRendered = $('[id^="childrenage-"]').length;


  });
});

＆＃13;

label {
  font-weight: 700;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class='content' id='passengers-popover' style="width: 100%;">
  <div class="col-xs-12">
    <div class="col-xs-3">
      <label class="search_rooms_input" for="search_rooms_input">Rooms:</label>
    </div>
    <div class="col-xs-9">
      <select name="" class="form-control" id="search_rooms_select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
    </div>
  </div>
  <div class="col-xs-12 col-md-12 paddinglr labelform">
    <div class="col-xs-4 col-md-4 col-sm-4 paddingright">
      <label class="labelselect"></label>
    </div>
    <div class="col-xs-8 col-md-8 col-sm-8 paddinglr">
      <div class="col-xs-6 col-sm-6 col-md-6 paddingright">
        <label>Adults</label>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 paddingright">
        <label>Children(0-16)</label>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-md-12" id="room-1">
    <div class="col-xs-4 col-md-4">
      <label>
        Room:
      </label>
    </div>
    <div class="col-xs-8 col-md-8 paddinglr">
      <div class="col-xs-6 col-sm-6 col-md-6">
        <select class="form-control" id='adults-1'>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6">
        <select class="form-control" id='children-1'>
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </div>
    </div>
    <div class="childrendiv"> </div>
  </div>
  <div class="col-xs-12 no-padding">
    <button type="button" class="btn btn-default" id="continue">Continue</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;