页面效果如下图所示:
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查看,如下图所示:
相关推荐
安卓的二级联动的一个小例子,共同学习
struts2+hibernate+spring mysql数据库
asp二级联动下拉框,三级联动下拉框,asp二级联动下拉框,三级联动下拉框, 可能传错了 sorry
省市二级联动Access版省市二级联动Access版
二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动二级联动三级联动
php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果 php代码实现二级联动下拉菜单效果
Ext二级联动的完整项目例子.导入项目即可看到效果.
省市二级联动mysql数据库
全国省市二级联动菜单 JavaScript 全国省市二级联动菜单 JavaScript
让您拥有你自己的二级联动实现方式 Java中二级联动的简单而实用例子
datagridview里面使用combobox进行二级联动的一个使用效果。
两个二级联动的例子,很实用,一个是数组的,一个是数据库
php+ajax 二级联动 无刷新实现省市县联动。
jquery插件城市二级联动 使用简单 数据是以微信地区数据为例
一段很简单的代码实现的全国二级城市联动选择效果 代码部分很简单,看过即会使用 主要字段内容在city.data.js中,如果需要修改城市名称,到里面找到对应的文字修改,或者添加即可
省市二级联动省市二级联动省市二级联动省市二级联动省市二级联动省市二级联动省市二级联动省市二级联动省市二级联动省市二级联动
二级联动 下拉列表 可以进行2级联动下拉等功效 完全的代码 用的时候只需要改改数据库就行了
省市二级联动数据
省市下拉框二级联动完成版(调试通过),本人花了几小时整理的,觉得是完整版。并且立即可以使用!
通达信与同花顺联动