Adding items to select

Question

Hello. I try to do so that when a selection is changed in one select , an element is added to another 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>

But the item does not add.

And if the code is $('#spp').prepend('<option value="1">55555</option>'); separately for the entire structure, the element adds immediately as the page loads.

Although POST goes to the file normally, I even get the answer.

What could be the reason?

And you tried not to add through then , but through success ?
(Example: $.ajax({data: {...}, success: function(data) {...}}) ).

Yuri yuri 13.3k five 36 82 · Answer 1 · 2017-03-04T09:57:55

Try adding through the success function:

 $("#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>

@ Denis, did you check the request at all? I think you have a mistake there. - Yuri

Answer 2 · 2017-03-04T09:57:00

Everything is working. No errors:

 $("#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>

Heh .. I did not see it :) Most likely the author has some kind of game there.
maybe due to the fact that various js files are connected to me?
@Denis in general, you understand, you cant not in this place.

Adding items to select

2 answers 2

More articles: