html - 在更改选择框值时添加一个 div 不能正常工作

Question

下面的代码工作正常，但想要一些改进，比如我想在每次更改选择框值时附加和删除选择人员 div

查看此网站http://www.travelnow.com/ 1：http ://www.travelnow.com/ 房间选择选项功能

我的 HTML 代码

<select id="roomOptions">
  <option value="1" selected="selected"> 1 </option>
  <option value="2"> 2 </option>
  <option value="3"> 3 </option>
</select>
<br/>
<div id="text">
  <label> Adults (18+) </label>
  <label> Children (0-17) </label>
</div>
<div class="select-person">
  <label> Adults (18+) </label>
  <select>
    <option value="1"> 1 </option>
    <option value="2" selected="selected"> 2 </option>
  </select>
  <label> Children (0-17) </label>
  <select>
    <option value="0" selected="selected"> 0 </option>
    <option value="1"> 1 </option>
    <option value="2"> 2 </option>
  </select>
</div>

我的脚本

$('select#roomOptions').change(function () {
    $('div#text select').remove();  
    var val = $(this).val();    
    for (var x = 1; x < val; x++) {
       var createSelectBox = '<select id="adults"><option value="1">1</option></select><option value="2">2</option></select><option value="3">3</option></select><select id="children"><option value="1">1</option></select><option value="2">2</option></select><option value="3">3</option></select>';
     $('div#text').append(createSelectBox);
    }   
});

Answer 1

找到一个解决方案不知道它是否正确和安全的方式......

HTML

<div>
<label>Select Rooms</label>
<select id="txtTickets">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>
</div>
<div style="width:200px; float:left">
<div style="width:100px; float:left;">
<label>Adult</label><br>
<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</div>
<div style="float:left; width:100px">
<label>Children</label><br>
<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</div>
</div>
<div style="clear:both"></div>
<div id="selectContainer"></div>

剧本

$('#txtTickets').change(function() {
      var val = parseInt($(this).val(), 10);
      var html = '';
      for (var i = 1; i < val; i++) {
            html += '<select class="adults"><option>One</option><option>Two</option></select><select class="childs"><option>One</option><option>Two</option></select><br>';
      }
      $('#selectContainer').html(html);
});