Добавление элементов в select

337

06 марта 2017, 11:36

Здравствуйте. Пытаюсь сделать чтобы при изменении выбора в одном select в другой select добавлялся элемент:

$("#slct").change(function() { 
  var id_prod = $("#slct").val(); 
  $.ajax({ 
    type: 'POST', 
    url: '/admin-panel/specz.php', 
    data: { 
      prod: id_prod 
    } 
  }).then(function(response) { 
    $('#spp').prepend('<option value="1">55555</option>'); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="selectpicker show-tick" data-style="btn-white" name="prod" id="slct" required> 
  <option value="1">Не менять</option> 
  <option value="2">Еще один</option> 
</select> 
 
<select class="selectpicker show-tick" data-style="btn-white" name="prod" id="spp" required> 
  <option value="1">Второе</option> 
</select>

Но элемент не добавляет.

А если код $('#spp').prepend('<option value="1">55555</option>'); вынести отдельно за всю конструкцию - то сразу при загрузки страницы элемент добавляет.

Хотя POST идет на файл нормально, даже ответ получаю.

В чем может быть причина?

Answer 1

Попробуйте добавлять через функцию success:

$("#slct").change(function() { 
  var id_prod = $("#slct").val(); 
  $.ajax({ 
    type: 'POST', 
    url: '/admin-panel/specz.php', 
    data: { 
      prod: id_prod 
    }, 
    success: function(data) { 
      $('#spp').prepend('<option value="1">55555</option>'); 
    } 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="selectpicker show-tick" data-style="btn-white" name="prod" id="slct" required> 
  <option value="1">Не менять</option> 
  <option value="2">Еще один</option> 
</select> 
 
<select class="selectpicker show-tick" data-style="btn-white" name="prod" id="spp" required> 
  <option value="1">Второе</option> 
</select>

Answer 2

Все работает. Ошибки нет:

$("#slct").change(function() { 
  var id_prod = $("#slct").val(); 
  console.log('Нажата кнопка') 
  $.ajax({ 
    type: 'GET', 
    url: 'https://httpbin.org/get', 
    data: { 
      prod: id_prod 
    } 
  }).then(function(response) { 
    console.log('Запрос отправлен') 
    $('#spp').prepend('<option value="1">55555</option>'); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="selectpicker show-tick" data-style="btn-white" name="prod" id="slct" required> 
  <option value="1">Поменяйте здесь</option> 
  <option value="2">Поменял</option> 
</select> 
 
<select class="selectpicker show-tick" data-style="btn-white" name="prod" id="spp" required> 
  <option value="1">Смотрите потом тут</option> 
</select>