`

二级联动(省份城市)

阅读更多
<!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="ext/ext-all.css">    
    
    <script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
    
  <script type="text/javascript" src="ext/ext-base.js"></script>    
    
  <script type="text/javascript" src="ext/ext-all.js"></script>    
    
  <!--<script type="text/javascript" src="citys.js" ></script>   --> 
    
  <script type="text/javascript">
    
	var citys=[     
  
['北京',[['北京'],['通县'],['昌平'],['大兴'],['密云'],['延庆'],['顺义'],['怀柔'],['平谷'],['石景山'],['朝阳'],['西城'],['东城'],['丰台'],['宣武'],['崇文'],['海淀']]],    
   
['上海',[['上海县'],['嘉定'],['松江'],['南汇'],['奉贤'],['川沙'],['青浦'],['崇明'],['金山']]],     
  
['天津',[['蓟县'],['宝坻'],['武清'],['静海'],['宁河']]]  
  
];  
    
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",     
    
        mode:'local',     
    
        fieldLabel: '所在省份',     
    
        blankText:'请选择省份',     
    
        emptyText:'请选择省份',     
    
        editable:false,     
    
        anchor:'90%',     
    
        forceSelection:true,     
    
        triggerAction:'all',     
    
        store:new Ext.data.SimpleStore(     
    
            {     
    
                fields: ["province","city"],     
    
                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>   



效果如下:

 
  • 大小: 4.6 KB
分享到:
评论

相关推荐

    javascript实现二级的省份城市联动

    javascript实现二级的省份城市联动。 var aprovince = [ ["--请选择省份--"], ["北京"], ["上海"], ["广东"], ["湖南"] ]; var acity = [ ["--请选择城市--"], ["东城区","西城区","南城区","北城区"], [...

    省份城市二级联动表

    标题中的“省份城市二级联动表”指的是在信息系统设计中常见的一种交互模式,通常用于用户选择他们的地理位置时。这种联动表单由两个下拉菜单组成,第一个列出所有省份,用户选择一个省份后,第二个下拉菜单会自动...

    js 省份城市二级联动 源码

    js 省份城市二级联动 源码

    省份城市二级联动JS

    本案例的"省份城市二级联动JS"是用于创建一个动态的下拉菜单,用户首先选择省份,接着根据所选省份,系统会自动加载并显示该省份下的所有城市。这种功能通常应用于注册表单、订单填写页面以及需要精确地理位置信息的...

    省份城市地区-三级联动

    这里的“省份城市地区-三级联动”是指在用户界面中,通过选择省份、城市和区域这三个层级的数据来实现筛选或导航的功能。这个特定的例子是基于jQuery和XML技术实现的。 首先,jQuery是一个强大的JavaScript库,它...

    二级联动,级联,省份城市联动

    在IT领域,二级联动是一种常见的交互设计模式,尤其在数据层级结构中,如省市区选择、商品分类等场景。这个概念通常与前端开发密切相关,涉及到HTML、CSS和JavaScript的运用。下面将详细解释二级联动的概念及其实现...

    下拉列表二级联动

    ### 下拉列表二级联动:深入解析与实现 在网页开发中,下拉列表是一种常见的用户交互元素,用于提供选项供用户选择。而“下拉列表二级联动”则是在此基础上的一种高级应用,它允许用户在选择第一个下拉列表的某个...

    js城市二级联动

    城市二级联动是一种常见的前端交互设计,特别是在网页表单中,用户需要选择地址时,它能够提供省市区等多级选择的便捷方式。这种技术在JavaScript(JS)和jQuery(jq)库的配合下可以轻松实现。本文将详细介绍如何...

    帝国CMS二级联动插件(ajax下拉列表) 帝国CMS二级联动插件(ajax下拉列表).rar

    本压缩包“帝国CMS二级联动插件(ajax下拉列表).rar”提供的就是针对帝国CMS系统的一个二级联动插件,利用AJAX技术实现实时数据加载。AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,...

    asp数据库二级联动

    当用户在一级联动中选择了一个省份,二级联动会自动加载并显示对应省份的城市列表。 实现这一功能,我们需要以下步骤: 1. **数据库设计**:确保数据库结构合理,通常会有两个关联的表,比如`province`和`city`,`...

    省市二级联动Access版

    这个"省市二级联动Access版"指的是利用Microsoft Access数据库管理系统实现的一种功能,使得用户在选择省份时,下拉菜单会动态显示出与之相关的城市。这种方式能够简化用户输入,提高交互体验。 在Access中,实现...

    带有滚动效果的城市二级联动

    1. **ListView与Adapter**:二级联动的核心是两个ListView,它们分别显示一级城市(如省份)和二级城市(如地级市)。ListView是Android中用于展示多行数据的视图组件,通过适配器Adapter将数据与视图进行绑定。在这...

    省份城市区县_下拉框三级联动选择

    在IT行业中,尤其是在网页开发和前端交互设计领域,"省份城市区县_下拉框三级联动选择"是一种常见的用户界面设计模式。这种设计主要用于让用户在输入地址或选择地理位置时,通过三个相互关联的下拉框依次选取省份、...

    android 二级联动

    在Android开发中,二级联动是一种常见的用户界面设计,通常用于实现多级选择或者筛选功能,例如省份-城市、类别-子类别的选择等。这种设计能够有效地帮助用户在大量数据中快速定位到所需的信息。本篇文章将深入探讨...

    HTML二级联动下拉列表框的实现,如选择 省,市.zip

    "两个下拉框联动,二级联动下拉框.png"可能是这个功能的截图,而".url"文件则是一个指向Callie在新浪博客上关于该话题的链接,提供了更多详细信息和示例。 总的来说,HTML二级联动下拉列表框的实现涉及HTML、...

    省市二级联动代码JS

    标题中的“省市二级联动代码JS”指的是在网页开发中实现的一种交互功能,它允许用户在选择省份后,自动更新下拉菜单以显示对应省份的城市,从而实现两级联动的效果。这种功能通常用于地址输入或者区域筛选等场景,...

    省市二级联动

    1. 省市区二级联动:这是一种网页表单设计模式,用户首先从一个下拉菜单中选择省份,然后根据所选省份,第二个下拉菜单动态加载相应的城市选项。这种方式通常被称为“联动”或“依赖选择”,因为一个选择会影响到另...

    省市下拉框二级联动完成版(调试通过)

    所谓的“二级联动”指的是用户在选择了某个地区(如省份)后,根据所选地区的不同,会动态展示相应的子级地区(如城市)。这种功能通常应用于注册表单、地址填写等功能模块中。 #### 二、HTML结构解析 HTML部分...

    二级联动json

    在IT领域,二级联动是一种常见的交互设计,常用于网页表单中,特别是在选择项关联的情况下。例如,当你选择一个省份时,城市会根据所选省份动态更新。这种效果可以通过JavaScript库,如jQuery,配合JSON数据来实现。...

    dropdownlist 省市二级联动

    在网页开发中,"dropdownlist 省市二级联动"是一种常见的交互设计,主要用于实现用户在选择省份时,下方的下拉列表会自动更新为对应省份的城市,无需页面整体刷新。这种功能通常应用于地址填写、订单提交等场景,...

Global site tag (gtag.js) - Google Analytics