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

多ComboBox级联

阅读更多
页面
<%@ page contentType="text/html;charset=utf-8"%>
<%!
    String province = "[['河北','河北'],['内蒙古','内蒙古']]";
    String cityHebei = "[" +
        "['唐山','唐山']," +
        "['秦皇岛','秦皇岛']," +
        "['承德','承德']," +
        "['张家口','张家口']" +
    "]";
    String cityNeimenggu = "[" +
        "['呼和浩特','呼和浩特']," +
        "['包头','包头']" +
    "]";
    String countyTangshan = "[" +
        "['路南区','路南区']," +
        "['路北区','路北区']," +
        "['开平区','开平区']," +
        "['古冶区','古冶区']," +
        "['丰润区','丰润区']," +
        "['丰南区','丰南区']," +
        "['玉田','玉田']," +
        "['遵化','遵化']," +
        "['迁西','迁西']," +
        "['迁安','迁安']," +
        "['滦县','滦县']," +
        "['滦南','滦南']," +
        "['乐亭','乐亭']," +
        "['唐海','唐海']" +
    "]";
    String countyUnknow = "[['不知道','不知道']]";
%>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");

String type = request.getParameter("type");
if ("province".equals(type)) {
    response.getWriter().print(province);
} else if ("city".equals(type)) {
    String province = java.net.URLDecoder.decode(request.getParameter("id"));
    System.out.println(province);
    if ("河北".equals(province)) {
        response.getWriter().print(cityHebei);
    } else if ("内蒙古".equals(province)) {
        response.getWriter().print(cityNeimenggu);
    }
} else if ("county".equals(type)) {
    String city = request.getParameter("id");
    if ("唐山".equals(city)) {
        response.getWriter().print(countyTangshan);
    } else {
        response.getWriter().print(countyUnknow);
    }

}
%>

远程store
var storeProvince=new Ext.data.Store({
   proxy:new Ext.data.HttpProxy:({url:'city.jsp?type=province'}),
  reader:new Ext.data.ArrayReader({},[
                                   {name:'value'},
                                   {name:'text'} 
                                ])
});
监听
storeProvince.load();
comboProvince.on('select',function(comboBox){
  var value=comboBox.getValue();
  storeCity.load({params:{id:value}});
});
 var comboProvince = new Ext.form.ComboBox({
        store: storeProvince,
        emptyText: '请选择',
        mode: 'local',
        triggerAction: 'all',
        valueField: 'value',
        displayField: 'text',
        readOnly: true,
        applyTo: 'comboProvince'
    });
comboCity.on('select',function(comboBox){
  var value=comboBox.getValue();
  storeCountry.load({params:{id:value}});
});

index.html
      
<div style="text-align:center;">
            <input id="comboProvince" type="text"/>
            <input id="comboCity" type="text"/>
            <input id="comboCounty" type="text"/>
        </div>
分享到:
评论

相关推荐

    datagrid中combobox的级联

    `datagrid` 的行内编辑功能允许用户直接在表格内对数据进行编辑,而 `combobox` 的级联则是在一个 `combobox` 的选择改变时,动态更新另一个 `combobox` 的选项,以实现联动效果。这种级联通常用于地理信息、部门...

    easyui的datagrid中editor和combobox的级联

    ### easyui的datagrid中editor和combobox的级联 在前端开发中,easyui是一个非常实用的库,它提供了一套完整的用户界面组件,能够帮助开发者快速构建出功能丰富的Web应用。其中,`datagrid`是easyui提供的一个重要...

    Wpf ComboBox 多级正反向级联的实现示例

    Wpf ComboBox 多级正向级联比较容易实现,想实现反向级联还是有一定难度。添加新对象只用到正向级联,而浏览不同的对象就需要用到反向级联。本示例程序为一个简约到极致的企业管理系统,使用EF Code First,Sql ...

    EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf

    EXTJS的ComboBox级联实现是Web应用程序中常见的一种交互方式,尤其在数据表单中用于联动选择。在本文中,我们将深入探讨EXTJS如何实现ComboBox的级联效果,并理解其数据提交VALUE的工作原理。 首先,我们需要创建两...

    jquery easyui combobox 级联java demo(真正可用)

    其中,Combobox(下拉框)是一个常用组件,它支持级联功能,即一个下拉框的选择会影响到另一个下拉框的选项。在Java后端,我们可以通过处理JSON数据来实现这种联动效果。以下将详细介绍如何使用jQuery EasyUI的...

    extJs ComboBox级联

    ExtJS ComboBox级联是一种在Web应用中常见的交互方式,它允许用户从下拉列表中选择一个值,并且这个选择会影响到另一个ComboBox的选择项,通常用于表示层级关系的数据,比如省份-城市-区县。这种功能在数据筛选、...

    WPF和Prism实现ComboBox省市县三级级联

    在本文中,我们将深入探讨如何使用Windows Presentation Foundation (WPF) 和 Prism 框架来实现ComboBox的省市县三级级联效果。WPF是.NET Framework的一部分,提供了丰富的用户界面(UI)设计工具,而Prism则是一个...

    EasyUI学习之Combobox级联下拉列表(2)

    在本文中,我们将深入探讨EasyUI的Combobox级联下拉列表的实现,这是一个非常实用的功能,常用于数据筛选和信息检索。EasyUI是基于jQuery的前端框架,它提供了丰富的UI组件,使得开发者能够快速构建美观且响应式的...

    c# winform datagridview 中嵌套的combobox实现级联选择

    c# winform datagridview 中嵌套的combobox实现级联选择

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    Java中单表和多表级联的增删改查

    - 当两个或更多表之间存在关联时,例如一对多、多对一或多对多关系,级联操作会涉及到一个表的操作导致另一个表的相关数据也发生变化。例如,删除一个用户可能需要同时删除与之相关的所有订单。 - Hibernate等ORM...

    C# winform实现combox绑定XML实现级联数据绑定

    在C# WinForm开发中,有时我们需要实现控件间的联动效果,例如两个ComboBox之间的级联数据绑定。这种功能常用于下拉列表的选择,当用户在第一个ComboBox中选择一个选项时,第二个ComboBox会根据所选值动态加载相关...

    Ext combo 下拉框级联

    总结来说,"Ext combo 下拉框级联"涉及了Ext JS的Combobox组件、事件监听、数据模型、服务端接口调用等多个知识点。实现这个功能需要对前端框架有深入理解,同时也要熟悉后端服务的交互方式。通过这样的设计,我们...

    delphi 控件开发 eidt,combobox下拉tree,自动级联

    在这个场景中,我们关注的是如何利用Edit、ComboBox和Tree控件实现一个具有下拉树功能的自动级联查询,尤其针对parent属性进行操作。下面将详细介绍这个过程。 1. **Edit控件**:Edit控件是最基本的文字输入控件,...

    easyUI combobox实现联动效果

    我在做项目时,经常用到easyUI框架,今天总结一下easyUI中的combobox吧 创建easyui-combobox的方法,在easyUI的官网都有: 1、从带有预定义结构的 元素创建组合框(combobox) &lt;select id=cc class=easyui-...

    DataGridCombox下拉列3级联

    在本文中,我们将深入探讨如何实现DataGrid中的ComboBox控件进行3级联的联动效果。 首先,我们需要了解DataGrid组件。DataGrid是Adobe Flex中的一种数据展示控件,它能够以表格形式显示数据集,支持排序、分页和...

Global site tag (gtag.js) - Google Analytics