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