页面效果如下图所示:
js代码如下图所示:
$(function(){ //初始化省份、城市下拉列表 var provinceId = $('#provinceId'); provinceId.combobox({ url:'demoAction!getProvinceJson.action', valueField:'provinceId', textField:'provinceName', onChange:function(){ var provinceId = $('#provinceId').combobox('getValue'); $('#cityId').combobox({ url:'demoAction!getCityJsonByProvinceId.action?provinceId='+provinceId, valueField:'cityId', textField:'cityName' }); } }); });
action处理如下图所示:
// ×××××××××××××××××××××××××××××××××××××××××××××××××××××××××× // ×××××××××××××××××××××××××××二级联动××××××××××××××××××××××× // ×××××××××××××××××××××××××××××××××××××××××××××××××××××××××× //进入二级联动页面 public String menuButton2(){ return "combobx2"; } //得到省级数据 public void getProvinceJson(){ JSONArray jsonArray = new JSONArray(); JSONObject jsonObj = new JSONObject(); jsonObj.put("provinceId", "bj"); jsonObj.put("provinceName", "北京"); jsonObj.put("selected", true); jsonArray.add(jsonObj); JSONObject jsonObj2 = new JSONObject(); jsonObj2.put("provinceId", "hb"); jsonObj2.put("provinceName", "河北"); jsonArray.add(jsonObj2); writeJson(jsonArray); } //-----------------------得到城市列表--------------------------- //浏览器传递过来的信息 private String provinceId; public String getProvinceId() { return provinceId; } public void setProvinceId(String provinceId) { this.provinceId = provinceId; } public void getCityJsonByProvinceId(){ JSONArray jsonArray = new JSONArray(); JSONObject jsonObj = new JSONObject(); if("bj".equals(provinceId)){ jsonObj.put("cityId", "ft"); jsonObj.put("cityName", "丰台区"); jsonObj.put("selected", true); JSONObject jsonObj2 = new JSONObject(); jsonArray.add(jsonObj); jsonObj2.put("cityId", "hd"); jsonObj2.put("cityName", "海淀区"); jsonArray.add(jsonObj2); } if("hb".equals(provinceId)){ jsonObj.put("cityId", "lf"); jsonObj.put("cityName", "廊坊"); jsonObj.put("selected", true); jsonArray.add(jsonObj); JSONObject jsonObj2 = new JSONObject(); jsonObj2.put("cityId", "cz"); jsonObj2.put("cityName", "石家庄"); jsonArray.add(jsonObj2); } writeJson(jsonArray); }
注意:如果默认使数据选中,需要设置 selected=true
小技巧:官网提供的例子里,直接通过firebug查看,如下图所示:
相关推荐
在这个例子中,我们主要探讨如何在Android应用中实现一个简单的二级联动效果。 首先,我们需要理解二级联动的基本概念。二级联动指的是两个或多个下拉列表之间的关联,当用户在一个下拉列表中选择一个选项时,另一...
Struts2.0是一个强大的Java Web开发框架,它在企业级应用中被广泛使用,尤其在构建MVC(Model-View-Controller)架构的应用程序时。三级联动是一种常见的功能需求,通常出现在下拉框的选择中,例如省份、城市、区县...
在ASP中,二级联动和三级联动下拉框是常见的功能,通常用于实现数据的筛选和过滤,例如在地区选择、商品分类等场景。下面将详细讲解如何在ASP中实现这些功能。 ### 二级联动下拉框 二级联动下拉框是指两个下拉框...
在网页设计中,二级联动(或称为下拉菜单联动)是一种常见的交互设计方式,它通常用于数据筛选或信息选择,特别是在有层次结构的数据中。二级联动的原理是,当用户在一个下拉菜单(一级菜单)中做出选择时,另一个...
本项目"uniapp 二级联动.zip"显然是一个关于使用uniapp进行二级联动功能开发的实践案例,这在很多数据筛选、地区选择等场景中非常常见。下面,我们将深入探讨uniapp二级联动的实现原理和相关知识点。 首先,理解...
本压缩包“帝国CMS二级联动插件(ajax下拉列表).rar”提供的就是针对帝国CMS系统的一个二级联动插件,利用AJAX技术实现实时数据加载。AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,...
当需要实现二级联动效果时,即一个`ComboBox`的选择会影响到另一个`ComboBox`的选项,这种功能常见于多级分类选择或筛选场景。本篇文章将深入探讨如何在C#环境下,利用这两个控件在`DataGridView`中实现二级联动。 ...
Java 中二级联动的简单而实用的例子 Java 中的二级联动是指在 select 选择框中,选择某个选项后,根据选项的值来动态加载另外一个 select 选择框的选项,这种技术广泛应用于许多 web 应用程序中,以提高用户体验和...
总的来说,这个“Ext二级联动完整例子”项目将涵盖ExtJS的基础组件使用、数据绑定、事件处理和用户交互等多个方面,对于学习和掌握ExtJS的联动功能具有很高的参考价值。通过分析和运行这个项目,开发者能够深入理解...
二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动
省市二级联动mysql数据库
### 下拉列表二级联动:深入解析与实现 在网页开发中,下拉列表是一种常见的用户交互元素,用于提供选项供用户选择。而“下拉列表二级联动”则是在此基础上的一种高级应用,它允许用户在选择第一个下拉列表的某个...
本文将详细介绍如何使用RecyclerView实现二级联动效果,并确保选中项在列表中保持高亮状态。 首先,我们需要理解RecyclerView的基本工作原理。RecyclerView是一个高效的视图复用机制,通过ViewHolder模式减少视图...
在ASP中实现数据库二级联动,通常是指在一个下拉菜单或选择框中选择一个选项后,根据该选项自动更新另一个下拉菜单或选择框的内容,这种效果在数据筛选和表单填写中非常常见。这种功能在网站的导航、筛选、查询等...
在IT行业中,二级联动是一种常见的交互设计,尤其在网页表单和数据筛选中十分常见。本文将详细讨论“下拉框二级联动”这一主题,以及如何利用AJAX和JSON技术来实现这一功能。 首先,我们要理解什么是二级联动。在...
省市二级联动是一种常见的数据筛选和展示方式,在网页设计或数据库应用中经常被使用。这个"省市二级联动Access版"指的是利用Microsoft Access数据库管理系统实现的一种功能,使得用户在选择省份时,下拉菜单会动态...
省市编码二级联动json
二级联动 下拉列表 可以进行2级联动下拉等功效 完全的代码 用的时候只需要改改数据库就行了
在这个“AJAX二级联动超实用例子程序”中,包含了三种不同的实现方式,每个都作为一个独立的Web工程,展示了如何利用AJAX进行二级联动效果的构建。 一、二级联动的基本概念 二级联动通常指的是在一个下拉框(select...
省市二级联动数据