set json data from ajax and make it serarchable in select2 jQuery -

i had 2 drop down input fields, both implementing select2 jquery. here set data static first drop down . works fine . per selection of value in first drop down, next drop down filled set of json data ajax. need second drop down should searchable once loaded ajax data. not correctly. not able make workable.

i used following scripts

function format(item) { return item.name; }         var data=[{"id":"1995","name":"banahatti"},{"id":"5074","name":"kolhapur(maharashtra)"},{"id":"2356","name":"sangola"},{"id":"906","name":"shahada"}];     $("#txtsource").select2({                 data:function() { return { text:'name', results: data }; },                 formatselection: format,                 formatresult: format             }); 

for second drop down loaded following

        var theid,desdata;         $("#txtsource").on('change',function(){            theid = $("#txtsource").select2('data').id;            desdata= $.getjson('api/destination.php',{source:theid});             //console.log(desdata);             });          $("#txtdestination").select2({             data:function() { return { text:'name', results:desdata  }; },             formatselection: format,             formatresult: format          }); 

i had similar situation. goal chain select2 off of change event of normal select. challenge how pass dynamic value url.

the select2 docs $opts.ajax.url can function. when dropped console.log function realized called during initialization.

here's solution - destroys , recreates select2 each time other select changes.

$opts = {     placeholder: "category ...",     minimuminputlength: 0,     dropdownautowidth: true,     ajax: {         url: getcategoryajaxurl(),         datatype: 'jsonp',         quietmillis: 100,         data: function (term, page) { // page one-based page number tracked select2             return {                 q: term, //search term                 page_limit: 10, // page size                 page: page, // page number             };         },         results: function (data, page) {             var more = data.total > 10; // return 11 when 10 asked show more available whether or not there more results available              // notice return value of more select2 knows if more results can loaded             return {results: data.results, more: more};         }     },     id: function(e) { return e.id; },     escapemarkup: function(m) { return m; },     initselection : function (element, callback) {         var data = {id: element.val(), text: element.val()};         callback(data);     },     //allow manually entered text in drop down.     createsearchchoice: function(term, data) {         if ( $(data).filter( function() {             return this.text.localecompare(term) === 0;         }).length === 0) {             return {id:term, text:term};         }     }, };      function getcategoryajaxurl() {     return "/ajax/categories.typeahead.php?doctypeid=" + $("#doctypeid").val(); }  function setupcategoriesselect2() {     $opts = select2textopts("category ...", 'categories', true, "?doctypeid=33");     $opts.ajax.url = getcategoryajaxurl();     $opts.createsearchchoice = null;     $("#categoryid").select2( $opts ); } $(document).ready(function () {     $('#doctypeid').change( function(e) {         $('#categoryid').select2("destroy");         setupcategoriesselect2();     });      setupcategoriesselect2(); });