jquery-selectize.js 更改下拉识别问题答案

【问题标题】：jquery-selectize.js changed dropdown identification issuejquery-selectize.js 更改下拉识别问题
【发布时间】：2013-10-06 15:07:47
【问题描述】：

我想知道在存在多个选定下拉列表的情况下单击或更改了哪个下拉列表。我有两个具有国家和州下拉菜单的容器。我想要做的是，当单击国家/地区下拉列表时，与单击的国家/地区下拉列表位于同一容器中的状态下拉列表将填充获取的数据。

我的 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();

【问题讨论】：

您定义 javascript 变量的方式对我来说有点奇怪，但您的代码看起来不错。现在告诉我们为什么这不起作用:)
这更多来自 selectize.js 示例站点。我改变了一点：D。回到我的问题，当我选择国家框时，它应该填充下一个具有类 select2-city 的兄弟。但是有两个国家两个城市的盒子，它们与巴黎作为国家/地区分开。

标签： javascript jquery ajax selectize.js

【解决方案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>

【讨论】：