Добавить div при изменении значения окна выбора не работает нормально

Question

Добавить div при изменении значения окна выбора не работает нормально

0

ниже код работает нормально, но хочет улучшить, например, я хочу добавить и удалить 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);
    }   
});

Arun 10 окт. 2013, в 14:46

Источник

Теги:

jquery

select

html5

1 ответ

Ещё вопросы

Arun · Answer 1 · 2013-10-10T11-22-00.000Z

Найти решение не знаю, как это правильно и безопасно или нет...

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);
});