jquery-selectize.js更改了下拉標識問題

Question

我想知道在存在多個選擇性下拉列表的情況下單擊或更改了哪個下拉列表。我有兩個容器有國家和國家的陰影。我想要做的是，當一個國家下拉菜單點擊時，與所點擊的國家下拉菜單位於同一橫向位置的狀態下拉菜單將填充所提取的數據。

我的js代碼是follwing;

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>