Используйте selectize.js для заполнения второго раскрывающегося списка

Question

У меня есть два выпадающих списка, что выбор первого выпадающего списка правильно заполняет второй. Я успешно реализовал его с помощью ajax-php.

Теперь я пытаюсь использовать selectize.js, примененный к первому из select (первый выпадающий список), который работает нормально, как ожидалось, но второе выпадающее меню не заполнено должным образом. Я прочитал документацию (что не самое лучшее, что я когда-либо читал), и я думаю, что по умолчанию selectize.js не может обрабатывать метаданные.

Однако есть addOption() и addItem() метод, который является то, что я должен implement.My проблема заключается в том, что я не могу найти способ для синтаксического анализа результатов, данные АЯКС-PHP (и сохраняется как options во втором раскрывающемся меню) и использовать их должным образом ...

PHP код

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

JQuery Code-обновление второй выпадающий

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

Посмотрите на город/штат например. Ключ: . Загрузить метод. Изнутри выпадающего списка выдается событие 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 
        } 
       }) 
      });