не корректно отрисовывается select с динамически обновляемыми option

180

04 апреля 2022, 18:40

Есть выпадающий список:

<select name="my-select">
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>

При нажатии на него, получаю данные ajax-ом запрос, и очищаю и обновляю в нужном select необходимые options.

Проблема в том что, при нажатии на элемент выпадающего списка, некорректно рассчитывается высота выпадающего меню с доступными option. То есть, если там был один option до нажатия, и я нажал и подгрузилось 10 option, то выпадающий список с выбором будет с высотой, как для одного поля.

Но если нажать еще раз то данные по размеру выпадающего списка обновляются корректно.

Такое ощущение что обновление размера окна выпадающего списка происходит до выполнения ajax и загрузки новых данных.

Как правильно это сделать?

$(document).ready(function() {

$('select[name="my-select"]').on("focus",function(e) {
    var myDynamoSelect = $('select[name="my-select"]');
    $.ajax({
        type: "POST",
        url: "some.php",
        data: "name=John&location=Boston",
        success: function ( data ) {
          myDynamoSelect.empty().html(data);
        }
     });

    });
 });

Answer 1

Попробуйте выполнять ajax синхронно при помощи async:false

$(document).ready(function() {

$('select[name="my-select"]').on("focus",function(e) {
    var myDynamoSelect = $('select[name="my-select"]');
    $.ajax({
        type: "POST",
        url: "some.php",
        data: "name=John&location=Boston",
        async:false,
        success: function ( data ) {
          myDynamoSelect.empty().html(data);
        }
     });

    });
 });

Answer 2

Вы можете поиграться с ивентами и задержками, но будет не очень красиво. Мне кажется, самое оно будет заранее получить все option и подсунуть их в селект ещё при загрузке страницы.

$('select[name="my-select"]').on("mouseup", function() { 
  var myDynamoSelect = $('select[name="my-select"]'); 
  myDynamoSelect.html('<option vslue="1">1</option><option vslue="2">2</option>'); 
}); 
 
$('select[name="my-select2"]').on("focus", function() { 
  var myDynamoSelect = $('select[name="my-select2"]') 
  setTimeout(function() { 
    myDynamoSelect.html('<option vslue="1">1</option><option vslue="2">2</option>'); 
  }, 300); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<select name="my-select"> 
 <option disabled selected="selected">mouseup</option> 
</select> 
 
<select name="my-select2"> 
 <option disabled selected="selected">setTimeout</option> 
</select>

Создание интернет-магазина парфюмерии в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

TypeError: but.getAttribute is not a function - react component

Решил сделать по типу https://githubcom/learn-co-students/React-Pizza-atlanta-web-042219, ограничился 1 категорией и когда решил присваивать значение абзацу из input, следуя...

166

javascript