ExtJS 省、市、县 级联 示例

原创 2012年03月26日 17:14:23

ExtJS 省、市、县级联示例

1.程序代码清单:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Test</title>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all.js"></script>

<script type="text/javascript">
    var dataProvince = [
        ['河北', '河北'],
        ['内蒙古', '内蒙古']
    ];
    var dataCityHebei = [
        ['唐山', '唐山'],
        ['秦皇岛', '秦皇岛'],
        ['承德', '承德'],
        ['张家口', '张家口']
    ];
    var dataCityNeimenggu = [
        ['呼和浩特', '呼和浩特'],
        ['包头', '包头']
    ];
    var dataCountyTangshan = [
        ['路南区', '路南区'],
        ['路北区', '路北区'],
        ['古治区', '古治区'],
        ['丰润区', '丰润区'],
        ['丰南区', '丰南区'],
        ['玉田', '玉田'],
        ['遵化', '遵化'],
        ['迁西', '迁西'],
        ['迁安', '迁安'],
        ['滦县', '滦县'],
        ['乐亭', '乐亭'],
        ['唐海', '唐海']
    ];
    var dataCountUnknow = [
        ['不知道', '不知道']
    ];
    var storeProvince = new Ext.data.SimpleStore({
        fields:['value', 'text'],
        data:dataProvince
    });
    var storeCity = new Ext.data.SimpleStore({
        fields:['value', 'text'],
        data:[]
    });
    var storeCounty = new Ext.data.SimpleStore({
        fields:['value', 'text'],
        data:[]
    });
    var comboProvince = new Ext.form.ComboBox({
        store:storeProvince,
        emptyText:'请选择省份',
        mode:'local',
        triggerAction:'all',
        valueField:'value',
        displayField:'text',
        fieldLabel:'请选择省份'
    });
    var comboCity = new Ext.form.ComboBox({
        store:storeCity,
        emptyText:'请选择城市',
        mode:'local',
        triggerAction:'all',
        valueField:'value',
        displayField:'text',
        fieldLabel:'请选择城市'
    });
    var comboCounty = new Ext.form.ComboBox({
        store:storeCounty,
        emptyText:'请选择县级',
        mode:'local',
        triggerAction:'all',
        valueField:'value',
        displayField:'text',
        fieldLabel:'请选择县级'
    });
    var entity = function(province, city, county) {
        this.province = province;
        this.city = city;
        this.county = county;
    }
    var en = new entity();
    comboProvince.on('select', function(comboBox){
        var province = comboBox.getValue();
        en.province = province;
        if (province == '河北') {
            storeCity.loadData(dataCityHebei);
            comboCity.clearValue();
            comboCounty.clearValue();
        } else if (province == '内蒙古') {
            storeCity.loadData(dataCityNeimenggu);
            comboCity.clearValue();
            comboCounty.clearValue();
        }
    });
    comboCity.on('select', function(comboBox) {
        var city = comboBox.getValue();
        en.city = city;
        if (city == '唐山') {
            storeCounty.loadData(dataCountyTangshan);
            comboCounty.clearValue();
        }else {
            storeCounty.loadData(dataCountUnknow);
            comboCounty.clearValue();
        }
    });
    comboCounty.on('select', function(comboBox) {
        var county = comboBox.getValue();
        en.county = county;
        Ext.Msg.alert('提示', en.province + '省' + en.city + '市' + en.county + '县');
    });
    Ext.onReady(function(){
        var newCarForm=new Ext.FormPanel({
            frame: true,
            title: 'comboBox_Cascade',
            bodyStyle: 'padding:5px',
            renderTo:"combo",
            width: 500,
            items: [
                comboProvince, comboCity,comboCounty
            ]
        });
    });

</script>
</head>
<body>
  <div id="combo"></div>
</body>
</html>

2.效果截图:



ExtJs 省市级联选择代码

extjs 省市级联代码,掌握了,其实省市县等多级联动是一样的 { xtype: "combo", id: 'prov', ...
  • oLinBSoft
  • oLinBSoft
  • 2014年02月17日 17:14
  • 8572

extjs 省市区三级联动combobox

测试主文件JSP:   省市区级联combobox测试   ComboboxTest.js Ext.ns("com.gwtjs"); var...
  • flash8627
  • flash8627
  • 2011年05月29日 20:57
  • 4510

Extjs中利用combobox实现全国省市级联

{                                         xtype : "combobox",                                     ...
  • name_liweibin
  • name_liweibin
  • 2013年05月29日 10:57
  • 1476

EXtjs2.2 实现全国省市县三级联动

  • 2013年08月26日 10:57
  • 648KB
  • 下载

Ext.form.ComboBox实现省、市、县级联

使用Ext.form.ComboBox
  • qcxiaofan
  • qcxiaofan
  • 2014年09月28日 16:23
  • 694

EXT实现省市县级联下拉选择

  • 2017年08月02日 14:36
  • 6KB
  • 下载

【原创】基于Extjs4的城市选择器插件

  • 2014年02月25日 23:18
  • 9KB
  • 下载

ExtJS(三)--Ajax实现省份城市联动

今天学习了Ajax技术,刚刚做了一个省份-城市联动的Ajax应用示例。可能很多人都已经写过了,也是一个比较简单的例子,在这里分享出来大家共同学习交流一下。希望能给到那些像我一样的菜鸟程序员参考一点帮助...
  • JavaChenZhenlin
  • JavaChenZhenlin
  • 2013年07月21日 20:24
  • 1976

extjs+struts2省市区三级联动完整示例

  • 2014年02月10日 10:09
  • 6.22MB
  • 下载

前端-EXTJS三级联动

直接上代码案例: //临时联动------------------------------------------------------------------ //创建一级数据源 ...
  • fragrant_no1
  • fragrant_no1
  • 2017年09月25日 10:30
  • 163
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ExtJS 省、市、县 级联 示例
举报原因:
原因补充:

(最多只允许输入30个字)