Добавление элемента Select Options JQuery

273

22 февраля 2017, 20:09

Имеется ComboBox при выборе который передаёт полученные значения из базы при помощи ajax во второй ComboBox, когда приходит 1 значение все отображается корректно, но если приходят 2 значения они записываются в 1 строчку, а нужно что бы добавлял в следующий Options. Прошу вашей помощи

Код

var t = null;
$( "#hotelid" ).change(function() {
    t = $( "#hotelid :selected" );
    $.ajax({
    type: 'GET',
    url: './modules/common.php',
    data: { fn: 'combobox', id: t.val() },
    dataType: 'json',
  }).done(function(data, textStatus, jqXHR) {
        var list = data.list.rooms;
        var e =""; 
        for (var i = 0; i < data.list.length; i++) {
        e += data.list[i].rooms;
        $( "#roomid option:selected").text(e);
        $( "#roomid option:selected").val(e);           
};
});
});

Ответ ajax

{list: [{rooms: "Еще комната"}, {rooms: "тест на кол-во"}]}
Эти 2 значения должны попасть в `<option value="value"></option>` сейчас пока только 1 показывает.

html

<select type="text" class="form-control" name="roomid" id="roomid"> 
                    <option value="value"></option>
                </select>

Answer 1

$( "#hotelid" ).change(function() { 
  // simulate asynchronous ajax 
  var response = {list: [{rooms: "Еще комната"}, {rooms: "тест на кол-во"}]}; 
  setTimeout(function(data) { 
    var room = $( "#roomid option:selected"); 
    for (var i = 0; i < data.list.length; i++) { 
      e = data.list[i].rooms; 
       
      if (room.length == 0) { 
        $("#roomid").append("<option></option>"); 
        room = $("#roomid option").last(); 
      } 
      room.text(e); 
      room.val(e); 
 
      room = room.next();  
    } 
  }, 1000, response); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select type="text" class="form-control" name="hotelid" id="hotelid">  
  <option value="value1">Royal</option> 
  <option value="value2">Savoy</option> 
</select> 
<br/> 
<select type="text" class="form-control" name="roomid" id="roomid">  
  <option value="value"></option> 
</select>