it-roy-ru.com

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

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

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

Часть 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');

Я довольно новичок во всем этом, поэтому хотел бы помочь.

27
n34_panda

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

53
Athina

Что я понял из моего опыта с этим до сих пор -

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

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

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

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

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

7
Rameshwar Vyevhare

Изменение имени класса selectpicker, когда оно скрыто:

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

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

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

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

    setTimeout(() => {
      jQuery('.selectpicker').selectpicker('refresh');
    }, 500);
1
Faiyaz Md Abdul

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

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

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

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