使用selectize.js填充第二个下拉列表

Question

我有两个下拉列表，第一个下拉列表的选择正确填充第二个列表。我已经使用ajax-php成功实现了它。

现在我试图使用selectize.js，应用于第一个select（第一个下拉列表），它可以正常工作，但第二个下拉列表没有正确填充。我已阅读文档（这不是我读过的最好的），我认为默认情况下selectize.js不能处理元数据。

但是有一个addOption()和addItem()方法，它是我应该implement.My问题是什么，我不能找到一种方法，通过分析Ajax的PHP给出的结果（并获得存储为options在第二个下拉），并正确地使用它们...

PHP代码

echo "<select name='universities' id='universities' ></select>"; //Here is where the second dropdown is populated properly 

jQuery代码更新第二个下拉

//Successfully the second dropdown is populated before  
$("#universities").selectize(); 
//If i change the first dropdown option now,the second dropdown remains the same 
//if i comment $("#universities").selectize(); line everything works fine. 

任何想法？

Answer 1

看看样品在这里：http://brianreavis.github.io/selectize.js/

看那城市/州例子。关键是.load方法。从状态下拉列表 onChange事件具有加载城市下拉的ajax调用。状态下拉列表的onChange事件被调用，选定的值被传递到函数中并发送到URL以获取大学。回调函数返回您想要加载到城市下拉菜单中的结果。

onChange: function(value) { 
      if (!value.length) return; 
      select_city.disable(); 
      select_city.clearOptions(); 
      select_city.load(function(callback) { 
       xhr && xhr.abort(); 
       xhr = $.ajax({ 
        url: 'https://jsonp.afeld.me/?url=http://api.sba.gov/geodata/primary_city_links_for_state_of/' + value + '.json', 
        success: function(results) { 
         select_city.enable(); 
         callback(results); <--- THIS CALL RETURNS THE JSON RESULTS TO THE CALLER 
        }, 
        error: function() { 
         callback(); <--THIS RETURNS TO CALLER ON ERROR 
        } 
       }) 
      });