Выбор HTML не обновляется после заполнения через JQuery

Question

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

неверно

Если я закрою и снова открою раскрывающийся список, он появится правильно.как показано ниже.

правильно

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

Такое ощущение, что это должно быть так легко исправить, но я новичок в скриптах и ​​борьбе.

HTML

<select class="custom-select" id="templateGroupName" name="templateGroupName">
    <option selected>Please Select a group</option>
</select>

JS - Завернут в документ .ready

$('#templateGroupName').click(function () {
    $.ajax({
        type: "GET",
        url: '/Layout/GetGroups',
        success: function (data) {
            helpers.buildDropdown(
                data,
                $('#templateGroupName'),
                'Select an option'
            );
        }
    });

});

var helpers =
{
    buildDropdown: function (result, dropdown, emptyMessage) {
        // Remove current options
        dropdown.html('');
        // Add the empty option with the empty message
        dropdown.append('<option value="">' + emptyMessage + '</option>');
        // Check result isnt empty
        if (result != '') {
            // Loop through each of the results and append the option to the dropdown
            $.each(result, function (k, v) {
                dropdown.append('<option value="' + v.Id + '">' + v.Name + '</option>');
            });
        }
    }
}

Answer 1

Сначала вам нужен <select> в качестве родителя, а не пустой элемент,

dropdown = $('#templateGroupName');

, затем вставьте его как элемент документа, а не строку:

var opt = document.createElement('option');
opt.value = v.Id;
opt.innerHTML = v.Name;
dropdown.appendChild(opt);

Answer 2

Браузер запутывается, когда вы вводите параметры, когда открыто <select>.Честно говоря, ваши пользователи, вероятно, тоже будут сбиты с толку.

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

Соедините эти два значения: first , когда пользователь наводит курсор на <select>, отключите его и установитекурсор на погрузочное колесо.Дождитесь загрузки ваших данных, затем вставьте параметры, включите их снова и верните курсор назад.

var helpers = {
  buildDropdown: function(result, dropdown, emptyMessage) {
    dropdown.html('');
    dropdown.append(`<option value="">${emptyMessage}</option>`);
    if (!!result) {
      $.each(result, function(k, v) {
        dropdown.append(`
            <option value="${v.Id}">
              ${v.Name}
            </option>
         `);
      });
    }
  }
}

const $DROPDOWN = $('#templateGroupName');
// using jQuery#one to only fire the click event once
$DROPDOWN.one('mouseenter', _ => {
  // disable dropdown while loading options
  $DROPDOWN.attr('disabled', true)
  console.log('loading options...');
  // replace contents with your GET request
  setTimeout(function() {
    helpers.buildDropdown(
      Array.from({
        length: 30
      }, (_, i) => ({
        Id: i,
        Name: i
      })),
      $DROPDOWN,
      'Select an option'
    );
    // un-disable after options are loaded and inserted
    $DROPDOWN.attr('disabled', false)
  }, 1000);
})

/* Show "loading" wheel while loading */

select.custom-select[disabled] {
  cursor: wait;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="custom-select" id="templateGroupName" name="templateGroupName">
  <option selected>Please Select a group</option>
</select>