`
Rowen
  • 浏览: 83046 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

省市二级联动

EXT 
阅读更多
省市二级联动,要导入city.js见附件。
Ext.onReady(function () {
    var store = new Ext.data.SimpleStore({
        fields: ['text', 'city'],
        data: citys
    });
    var linkStore = new Ext.data.SimpleStore({
        fields: ['text', 'city'],
        data: []
    });
    var provinceCombo = new Ext.form.ComboBox({
        typeAhead: true,
        forceSelection: true,
        selectOnFocus: true,
        minChars: 0,
        triggerAction: 'all',
        displayField: 'text',
        store: store,
        fieldLabel: '所在省份',
        blankText: '请选择省份',
        emptyText: '请选择省份',
        editable: false,
        anchor: '90%',
        mode: 'local',
        listeners: {
            select: function (combo, record, index) {
               //清空先前的市记录
                cityCombo.clearValue();
               //加载新的市记录
                cityCombo.store.loadData(record.data.city);
            }
        }
    });
    var cityCombo = new Ext.form.ComboBox({
        typeAhead: true,
        forceSelection: true,
        selectOnFocus: true,
        minChars: 0,
        triggerAction: 'all',
        displayField: 'text',
        store: linkStore,
        fieldLabel: '所在城市',
        blankText: '请选择城市',
        emptyText: '请选择城市',
        editable: false,
        anchor: '90%',
        mode: 'local'
    });
    var simpleForm = new Ext.form.FormPanel({
        applyTo: document.body,
        labelAlign: 'left',
        title: '省份与城市联动的例子',
        buttonAlign: 'center',
        bodyStyle: 'padding:5px',
        width: 600,
        frame: true,
        labelWidth: 80,
        items: [{
            layout: 'column',
            border: false,
            labelSeparator: ':',
            items: [{
                columnWidth: .5,
                layout: 'form',
                border: false,
                items: [provinceCombo]
            },
            {
                columnWidth: .5,
                layout: 'form',
                border: false,
                items: [cityCombo]
            }]
        }]
    });
});
分享到:
评论

相关推荐

    省市二级联动mysql数据库

    省市二级联动mysql数据库

    省市二级联动Access版

    省市二级联动是一种常见的数据筛选和展示方式,在网页设计或数据库应用中经常被使用。这个"省市二级联动Access版"指的是利用Microsoft Access数据库管理系统实现的一种功能,使得用户在选择省份时,下拉菜单会动态...

    省市二级联动数据

    省市二级联动数据

    省市二级联动代码JS

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

    JQuery省、省市二级联动、省市县/区三级联动

    这里提到的"JQuery省、省市二级联动、省市县/区三级联动"是一个使用jQuery库实现的前端解决方案,它能为用户提供流畅且视觉效果良好的交互体验。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、...

    jQuery移动端省市二级联动选择插件.zip

    "jQuery移动端省市二级联动选择插件"是专为解决这个问题而设计的一个工具,它利用JavaScript和jQuery库,提供了高效、易用的解决方案。这个插件允许用户在手机或平板设备上方便地选择省份和城市,极大地提升了用户...

    android省市二级联动

    在Android开发中,"省市二级联动"是一种常见的需求,特别是在涉及到地理位置选择的场景,如地址填写、定位服务等。这个功能允许用户首先选择省份,然后根据所选省份展示相应的城市列表,实现无缝交互。以下是对这个...

    jquery 省市二级联动

    一段很简单的代码实现的全国二级城市联动选择效果 代码部分很简单,看过即会使用 主要字段内容在city.data.js中,如果需要修改城市名称,到里面找到对应的文字修改,或者添加即可

    vue学习之mintui picker选择器实现省市二级联动示例

    本文介绍了vue学习之mintui picker选择器实现省市二级联动示例,分享给大家,具体如下: Mint UI 使用文档:https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍:...

    jQuery省市二级联动关联店面查询表单代码

    在这个“jQuery省市二级联动关联店面查询表单代码”项目中,开发者利用jQuery实现了用户友好的店面查询功能,特别适用于网络营销场景,帮助用户快速找到连锁店铺的全国网点。 首先,我们要理解“省市二级联动”的...

    dropdownlist 省市二级联动

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

    spinner实现省市二级联动

    本示例主要讲解如何利用Spinner实现省市二级联动的功能,这是一个在许多应用中都需要用到的功能,如地址填写、定位服务等。下面将详细介绍这个过程。 首先,我们需要明白什么是二级联动。二级联动是指在一个选择框...

    省市二级联动,实战项目中抽取出来的

    在Android开发中,省市二级联动是一项常见的功能,用于在用户选择省或直辖市后自动更新市的选项,以提供更高效便捷的用户输入体验。在这个实战项目中,开发者使用了WheelView来实现这一功能。让我们深入探讨一下这个...

Global site tag (gtag.js) - Google Analytics