Jquery bootstrap selectpicker обновляет списки на основе предыдущего выбора списка

У меня есть три выпадающих списка, один список заполняется на загрузке страницы и не изменяется. Второй и третий списки могут меняться в зависимости от выбора. Эта функциональность работает нормально.

Я попытался добавить selectpicker Bootstrap к селекторам, и я вижу, что он работает - к сожалению, списки не обновляются на основе выбора. Я на самом деле думаю "за кулисами", так как я вижу, что запросы передаются, но через интерфейс ничего не происходит.

Часть HTML:

<!-- SelectPicker -->
<link href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css' rel='stylesheet' type='text/css'>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

Первые два DDL создаются с помощью php, но

<select id='ddl_first_lookup' onchange='ajaxFirstOnChange(this.value)' value='' class='selectpicker'></option>
<select id='ddl_second_lookup' onchange='ajaxSecondOnChange(this.value)' class='selectpicker'>
<select id="ddl_third_lookup" onchange='ajaxThirdLookup(this.value)' class='selectpicker'></select>

У меня есть следующий Javascript:

$(document).ready(function() {  
  $(".selectpicker").selectpicker();
});

Это тот момент, когда я обнаружил проблему, я пытаюсь реализовать это в ajax для функций изменения без успеха - даже не уверен, что это правильно.

$('.selectpicker').selectpicker('refresh');

Я новичок в этом, поэтому мне нужна помощь.

ОТВЕТЫ

Ответ 1

Я нашел ваш вопрос после той же проблемы. Добавляя $('.selectpicker').selectpicker('refresh'); точно после добавления элементов в мой список, выполните эту работу.
Поэтому вам, вероятно, нужно найти правильное место для его размещения. Возможно, в успешной части вашего вызова ajax.

Ответ 2

То, что я понял из своего опыта с этим до сих пор -

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

$(".selectpicker").selectpicker();

После того, как вы завершили добавление опций, вызовите функцию ниже (если вы используете ajax для добавления опции, добавьте эту функцию в успешную часть, как только что ответили Athina)

$('.selectpicker').selectpicker('refresh');

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

Ответ 3

Изменение имени класса selectpicker при скрытии:

<select name="key" class="selectpicker_oncreate">

При обновлении:

$('.selectpicker_oncreate').selectpicker('refresh');

Ответ 4

В моем Ajax successCallBack я пытаюсь манипулировать выпадающим списком с id как reasonCode на основе dynamicId (значение get from server), как показано ниже:

$('#reasonCode option[value='+dynamicId+']').prop('selected', true);

но, к сожалению, это не сработало, пока я не добавил следующую строку:

$('#reasonCode').selectpicker('refresh');

Ответ 5

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

    setTimeout(() => {
      jQuery('.selectpicker').selectpicker('refresh');
    }, 500);