EXT 二级联动下拉列表

最新推荐文章于 2021-02-25 07:49:59 发布

最新推荐文章于 2021-02-25 07:49:59 发布 · 142 阅读

文章标签：

#EXT #JavaScript #金山 #CSS #IE #ViewUI

Ext 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一个使用ExtJS实现的省份和城市二级联动选择器示例。通过ComboBox组件展示省份列表，并根据所选省份动态加载对应的城市列表。适用于地区选择等应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

page.html代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <title>省份和城市二级联动例子</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <link rel="stylesheet" type="text/css"
            href="../extjs/resources/css/ext-all.css">

        <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>

        <script type="text/javascript" src="../extjs/ext-all.js"></script>

        <script type="text/javascript" src="../extjs/ext-lang-zh_CN.js"></script>

        <script type="text/javascript" src="city.js"></script>

        <script type="text/javascript">

Ext.onReady(function(){

    //重载Grid排序 applySort

    Ext.data.Store.prototype.applySort = function(){ //重载 applySort

        if(this.sortInfo && !this.remoteSort){

            var s = this.sortInfo, f = s.field;

            var st = this.fields.get(f).sortType;

            var fn = function(r1, r2){

              var v1 = st(r1.data[f]), v2 = st(r2.data[f]);

                //添加：修复汉字排序异常Bug

               if(typeof(v1) == "string"){ //若为字符串

                 return v1.localeCompare(v2);//则用localeCompare比较汉字字符串, Firefox 与 IE 均支持

               }

              return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);

            };

            this.data.sort(s.direction, fn);

            if(this.snapshot && this.snapshot != this.data){

                this.snapshot.sort(s.direction, fn);

            }

        }

    };

    var provinceComBo=new Ext.form.ComboBox({
           //隐藏名字
        hiddenName:'province',
           //名字
        name: 'province_name',

        valueField:"province",

        displayField:"province",
           //从哪里读取数据（local从本地读取数据，remote从服务器读取数据）
        mode:'local',
           //标签显示的内容
        fieldLabel: '所在省份',
           //没有输入时显示的内容
        blankText:'请选择省份',
           //预设文字
        emptyText:'请选择省份',
           //是否可编辑
        editable:false,
           //固定百分比
        anchor:'90%',
           //固定选择项
        forceSelection:true,
           //触发动作
        triggerAction:'all',
           //数据源
        store:new Ext.data.SimpleStore(

            {
                   //js中表示的数据格式
                fields: ["province","city"],
                   //js中数据源名称
                data:citys,
                   //排序信息
                sortInfo:{field:'province'}

            }

        ),
           //监听器
        listeners:{

            select:function(combo, record, index){

            /*select : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )

            Fires when a list item is selected

            Listeners will be called with the following arguments:



                * combo : Ext.form.ComboBox

                  This combo box

                * record : Ext.data.Record

                  The data record returned from the underlying store

                * index : Number

                  The index of the selected item in the dropdown list



            */
                   //清空显示值
                cityCombo.clearValue();
                   //加载数据
                cityCombo.store.loadData(record.data.city);

            }

        },

        applyTo: 'provinceComBo'

    })



    var cityCombo=new Ext.form.ComboBox({

        hiddenName:'city',

        name:'city_name',

        valueField:"city",

        displayField:"city",

        mode:'local',

        fieldLabel: '所在城市',

        blankText:'请选择城市',

        emptyText:'请选择城市',

        editable:false,

        anchor:'90%',

        forceSelection:true,

        triggerAction:'all',

        store:new Ext.data.SimpleStore({fields: ["city"],data:[],sortInfo:{field:'city'}}),

        applyTo: 'cityCombo'

    });



})



</script>

    </head>

    <body>

        <input type="text" id="provinceComBo" size="20" />
        <input type="text" id="cityCombo" size="20" />

    </body>

</html>

city.js的代码

var citys=[

['北京',[['北京'],['通县'],['昌平'],['大兴'],['密云'],['延庆'],['顺义'],['怀柔'],['平谷'],['石景山'],['朝阳'],['西城'],['东城'],['丰台'],['宣武'],['崇文'],['海淀']]],

['上海',[['上海县'],['嘉定'],['松江'],['南汇'],['奉贤'],['川沙'],['青浦'],['崇明'],['金山']]],

['天津',[['蓟县'],['宝坻'],['武清'],['静海'],['宁河']]]]