嵌套選擇框 - 第一次更改時設置第二個jQuery下拉

Question

我想創建一個使用jQuery/AJAX和PHP/MySQL的動態下拉框設置。當頁面根據數據庫中的值加載時，第一個下拉框將被填充。第二個下拉框應顯示一組基於來自第一個下拉框的選擇的值。

我使用了選擇插件爲了有搜索選項。

我的問題是：當我選擇第一個選擇框時，第二個選擇框中不顯示任何內容。當我從Html中刪除class="chosen-select"時，它工作正常！

我需要在選擇框中進行搜索。所以我該怎麼做？

<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> 

預先感謝您。

Answer 1

最後，我找到了答案:)

<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>