EXT 二级联动下拉列表

本文介绍了一个使用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=[   
  
['北京',[['北京'],['通县'],['昌平'],['大兴'],['密云'],['延庆'],['顺义'],['怀柔'],['平谷'],['石景山'],['朝阳'],['西城'],['东城'],['丰台'],['宣武'],['崇文'],['海淀']]],   
  
['上海',[['上海县'],['嘉定'],['松江'],['南汇'],['奉贤'],['川沙'],['青浦'],['崇明'],['金山']]],   
  
['天津',[['蓟县'],['宝坻'],['武清'],['静海'],['宁河']]]]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值