我想知道在存在多个选择性下拉列表时单击或更改了哪个下拉列表。我有两个容器有国家和州的投影。我想要做的是,当一个国家/地区下拉列表点击时,与点击的国家/地区下拉列表相同的状态下拉列表将填充所获取的数据。
我的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" /> ';
}
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();
答案 0 :(得分: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" /> ';
}
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>