nested selectbox — установить второй раскрывающийся список jquery при изменении первого

Question

nested selectbox — установить второй раскрывающийся список jquery при изменении первого

Я пытаюсь создать динамический набор раскрывающихся списков, используя jQuery / AJAX и PHP / MySQL. Первый выпадающий список будет заполнен, когда страница загружается на основе значений из базы данных. Во втором раскрывающемся списке должен отображаться набор значений, основанный на выборе из первого раскрывающегося списка.

Я использовал плагин Chosen, чтобы иметь возможность поиска.

Моя проблема: когда я выбираю первый блок выбора, во втором блоке выбора ничего не отображается. когда я удаляю class="chosen-select"из HTML, он работает правильно!

Мне нужен поиск в selectbox. И что же мне делать?

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.chosen-select').chosen({
no_results_text: "Oops, nothing found!"});
$('#search1').on('change', function (){
$('#search2').html("<option value=''>Select</option>");// add this on each call then add the options when data receives from the request
$.getJSON('select.php', {id: $(this).val()}, function(data){
var options = '';
for (var x = 0; x < data.length; x++) {
options += '<option value="' + data[x]['id'] + '">' + data[x]['Date'] + '</option>';
}
$('#search2').html(options);
//$('.chosen-select').chosen();
});
});
});
</script>

Это второй выбор:

<select  id="search2" name="search" type="text" data-placeholder="Choose an Option..."     style="width:370px;" class="chosen-select" onChange="drawChart(this.value);">
<option value=""></option>
</select>

Заранее спасибо.

1

ajax drop-down-menu jquery jquery-chosen php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Наконец-то я нашел ответ 🙂

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.chosen-select').chosen({
no_results_text: "Oops, nothing found!"});
$('select#search1').on('change', function (){
$('select#search2').html("<option value=''>Select the Option..</option>");// add this on each call then add the options when data receives from the request
$.getJSON('select.php', {id: $(this).val()}, function(data){
$('select#search2').empty();

var options = '<option value="0">Select the Option..</option>';
for (var x = 0; x < data.length; x++) {
options += '<option value="' + data[x]['id'] + '">' + data[x]['Date'] + '</option>';
}
$('select#search2').chosen();
$('select#search2').html(options);
$("#search2").trigger("chosen:updated");
});
});
});
</script>

0