var provinces = [[1,'北京'],[2,'上海']];
var cities = new Array();
cities[1] = [[11,'海淀'],[22,'东城']];
cities[2] = [[33,'黄埔'],[44,'浦东'],[55,'静安']];
var comboProvinces = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore( {
fields: ["provinceId", "provinceName"],
data: provinces
}),
listeners:{
select:function(combo, record,index){
comboCities.clearValue();
comboCities.store.loadData(cities[record.data.provinceId]);
}
},
valueField :"provinceId",
displayField: "provinceName",
mode: 'local',
forceSelection: true,
blankText:'请选择省份',
emptyText:'请选择省份',
hiddenName:'provinceId',
editable: false,
triggerAction: 'all',
allowBlank:true,
fieldLabel: '请选择省份',
name: 'provinceId',
width: 80
});
var comboCities = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore( {
fields: ["cityId",'cityName'],
data:[]
}),
valueField :"cityId",
displayField: "cityName",
mode: 'local',
forceSelection: true,
blankText:'选择地区',
emptyText:'选择地区',
hiddenName:'cityId',
editable: false,
triggerAction: 'all',
allowBlank:true,
fieldLabel: '选择地区',
name: 'cityId',
width: 80
});
ComboBox控件的id和hiddenName不要设置成一样,否则会选不中选项
本文介绍如何使用ExtJS实现省市区三级联动的下拉框选择功能。通过两个ComboBox组件分别展示省份和城市选项,并在省份选择发生变化时动态加载对应的城市数据。此示例适用于需要地区联动选择的应用场景。
1269

被折叠的 条评论
为什么被折叠?



