jquery-selectize.js изменил выпадающий идентификационный номер проблемы

Question

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

мой код js является необработанным;

var xhr , a; 
var country, $country; 
var city, $city; 

$country = $(".select2-country").selectize({ 
        render: { 
         option: function(item, escape) { 
          var markup = "<div>"; 
          if (item.value !== undefined && item.value != 0) { 
           markup += '<img width="25px" src="http://www.geonames.org/flags/x/' + item.value.toLowerCase() + '.gif" />&nbsp;'; 
          } 
          markup += item.text; 
          markup += '</div>';      
          return markup; 
         } 
        }, 
        onChange: function(value) { 
         if (!value.length) return; 
         console.log(this); 
         city.disable(); 
         city.clearOptions(); 
         city.load(function(callback) { 
                 xhr && xhr.abort(); 
                 xhr = $.ajax({ 
                     url: draSite + '?index.php&option=com_dratransport&view=', 
                     dataType: 'json', 
                     data:{ 
                      selected: value, 
                      task: 'getCities', 
                     }, 
                     success: function(results) { 
                      city.enable(); 
                      callback(results); 
                     }, 
                     error: function() { 
                      callback(); 
                     } 
                 }); 
                }); 
        } 
       }); 

$city = $('.select2-city').selectize({ 
    valueField: 'value', 
    labelField: 'text', 
    searchField: ['text'], 
    sortField: 'sort', 
    sortDirection: 'ASC', 
    diacritics:true, 
}); 

city = $city[0].selectize; 
//country = $country[0].selectize; 
city.disable();   

Answer 1

Я сделал это так. Это работает, но я надеюсь, что это хороший способ сделать это.

var xhr , a; 
var country, $country; 
var city, $city; 

$country = $(".select2-country").selectize({ 
        render: { 
         option: function(item, escape) { 
          var markup = "<div>"; 
          if (item.value !== undefined && item.value != 0) { 
           markup += '<img width="25px" src="http://www.geonames.org/flags/x/' + item.value.toLowerCase() + '.gif" />&nbsp;'; 
          } 
          markup += item.text; 
          markup += '</div>';      
          return markup; 
         } 
        }, 
        onChange: function(value) { 
         city = $(this.$dropdown).parent().siblings('.select2-city')[0].selectize; 
         if (!value.length){city.clearOptions(); return;};       
         city.disable(); 
         city.clearOptions(); 
         city.load(function(callback) { 
                 xhr && xhr.abort(); 
                 xhr = $.ajax({ 
                     url: draSite + '?index.php&option=com_dratransport&view=', 
                     dataType: 'json', 
                     data:{ 
                      selected: value, 
                      task: 'getCities', 
                     }, 
                     success: function(results) { 
                      city.enable(); 
                      callback(results); 
                     }, 
                     error: function() { 
                      callback(); 
                     } 
                 }); 
                }); 
        }, 

       }); 

$city = $('.select2-city').selectize({ 
    valueField: 'value', 
    labelField: 'text', 
    searchField: ['text'], 
    sortField: 'sort', 
    sortDirection: 'ASC', 
    diacritics:true, 
}); 

for(var i = 0; i<$city.length; i++){ 
    city = $city[i].selectize; 
    city.disable(); 
} 
country = $country[0].selectize; 

html-код есть;

<div id="first">First:<select id="countryfrom" name="countryfrom" class="select2-country" placeholder="Ülke Seçiniz..."> 
</select> 
<select id="cityfrom" name="cityfrom" class="select2-city" placeholder="Şehir Seçiniz..." > 
<option value="" selected="selected"></option> 
<option value="0">Diğer</option> 
</select> 
</div> 
<div id="second">Second:<select id="countryto" name="countryto" class="select2-country" placeholder="Ülke Seçiniz..."> 
</select> 
<select id="cityto" name="cityto" class="select2-city" placeholder="Şehir Seçiniz..." > 
<option value="" selected="selected"></option> 
<option value="0">Diğer</option> 
</select> 
</div>