文档章节

关于城市级联选择和数据回显的解决方案

wangrikui
 wangrikui
发布于 2014/01/07 17:28
字数 1989
阅读 1000
收藏 8


级联控件js:
============================

/*说明:这里做的是二级选择省份和地级市;
在页面中body内通过onload加载该js的函数setup(),初始化控件;change()函数是根据父选择项级联变动的子选择项;preselect()函

数:该函数是回显的关键函数,正式该函数接收回显数据,控制城市级联变动的。preselect()也需由onload加载,并传入回显参数*/

function Dsy() {
    this.Items = {};
}
Dsy.prototype.add = function (id, iArray) {
    this.Items[id] = iArray;
};
Dsy.prototype.Exists = function (id) {
    if (typeof(this.Items[id]) == "undefined") return false;
    return true;
};

function change(v,p_city) {//接收回显参数:城市
    var str = "0";
    for (i = 0; i < v; i++) { str += ("_" + (document.getElementById(s[i]).selectedIndex - 1));}
    ;
    var ss = document.getElementById(s[v]);
    
    with (ss) {
        length = 0;
        options[0] = new Option(opt0[v], opt0[v]);
        if (v && document.getElementById(s[v - 1]).selectedIndex > 0 || !v) {
            if (dsy.Exists(str)) {
                ar = dsy.Items[str];
                for (i = 0; i < ar.length; i++){
                    options[length] = new Option(ar[i], ar[i]);
                }
                for (i = 0; i < ar.length; i++){
                    if (p_city == ar[i]) {
                        ss.selectedIndex = i+1;//城市的回显
                    }
                }
            }
        }
        if (++v < s.length) {change(v);}
    }
}
function preselect(p_key,p_city) {//从页面传入的回显参数:地区和城市
    var index;

    var provinces = new Array("北京市", "天津市", "上海市", "重庆市", "河北省", "山西省", "内蒙古", "辽宁省", "吉林省", "黑

龙江省", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "广西", "海南

省", "四川省", "贵州省", "云南省", "西藏", "陕西省", "甘肃省", "青海省", "宁夏", "新疆", "香港", "澳门", "台湾省");
    var cnt = provinces.length;
    for (i = 0; i < cnt; i++) {
        if (p_key == provinces[i]) {
            index = i;
            break;
        }
    }
    if (index < provinces.length) {
        document.getElementById(s[0]).selectedIndex = index + 1;//地区的回显
        change(1,p_city);
    }
}

var dsy = new Dsy();

dsy.add("0_0", ["北京市"]);
dsy.add("0_1", ["天津市"]);
dsy.add("0_2", ["上海市"]);
dsy.add("0_3", ["重庆市"]);
dsy.add("0_4", ["石家庄市", "张家口市", "承德市", "秦皇岛市", "唐山市", "廊坊市", "保定市", "衡水市", "沧州市", "邢台市", "

邯郸市"]);
dsy.add("0_5", ["太原市", "朔州市", "大同市", "阳泉市", "长治市", "晋城市", "忻州市", "晋中市", "临汾市", "吕梁市", "运城市

"]);
dsy.add("0_6", ["呼和浩特市", "包头市", "乌海市", "赤峰市", "通辽市", "呼伦贝尔市", "鄂尔多斯市", "乌兰察布市", "巴彦淖尔市

", "兴安盟", "锡林郭勒盟", "阿拉善盟"]);
dsy.add("0_7", ["沈阳市", "朝阳市", "阜新市", "铁岭市", "抚顺市", "本溪市", "辽阳市", "鞍山市", "丹东市", "大连市", "营口市

", "盘锦市", "锦州市", "葫芦岛市"]);
dsy.add("0_8", ["长春市", "白城市", "松原市", "吉林市", "四平市", "辽源市", "通化市", "白山市", "延边州"]);
dsy.add("0_9", ["哈尔滨市", "齐齐哈尔市", "七台河市", "黑河市", "大庆市", "鹤岗市", "伊春市", "佳木斯市", "双鸭山市", "鸡西

市", "牡丹江市", "绥化市", "大兴安岭地区"]);
dsy.add("0_10", ["南京市", "徐州市", "连云港市", "宿迁市", "淮安市", "盐城市", "扬州市", "泰州市", "南通市", "镇江市", "常

州市", "无锡市", "苏州市"]);
dsy.add("0_11", ["杭州市", "湖州市", "嘉兴市", "舟山市", "宁波市", "绍兴市", "衢州市", "金华市", "台州市", "温州市", "丽水

市"]);
dsy.add("0_12", ["合肥市", "宿州市", "淮北市", "亳州市", "阜阳市", "蚌埠市", "淮南市", "滁州市", "马鞍山市", "芜湖市", "铜

陵市", "安庆市", "黄山市", "六安市", "巢湖市", "池州市", "宣城市"]);
dsy.add("0_13", ["福州市", "南平市", "莆田市", "三明市", "泉州市", "厦门市", "漳州市", "龙岩市", "宁德市"]);
dsy.add("0_14", ["南昌市", "九江市", "景德镇市", "鹰潭市", "新余市", "萍乡市", "赣州市", "上饶市", "抚州市", "宜春市", "吉

安市"]);
dsy.add("0_15", ["济南市", "青岛市", "聊城市", "德州市", "东营市", "淄博市", "潍坊市", "烟台市", "威海市", "日照市", "临沂

市", "枣庄市", "济宁市", "泰安市", "莱芜市", "滨州市", "菏泽市"]);
dsy.add("0_16", ["郑州市", "开封市", "三门峡市", "洛阳市", "焦作市", "新乡市", "鹤壁市", "安阳市", "濮阳市", "商丘市", "许

昌市", "漯河市", "平顶山市", "南阳市", "信阳市", "周口市", "驻马店市"]);
dsy.add("0_17", ["武汉市", "十堰市", "襄樊市", "荆门市", "孝感市", "黄冈市", "鄂州市", "黄石市", "咸宁市", "荆州市", "宜昌

市", "随州市", "省直辖县级行政单位", "恩施州"]);
dsy.add("0_18", ["长沙市", "张家界市", "常德市", "益阳市", "岳阳市", "株洲市", "湘潭市", "衡阳市", "郴州市", "永州市", "邵

阳市", "怀化市", "娄底市", "湘西州"]);
dsy.add("0_19", ["广州市", "深圳市", "清远市", "韶关市", "河源市", "梅州市", "潮州市", "汕头市", "揭阳市", "汕尾市", "惠州

市", "东莞市", "珠海市", "中山市", "江门市", "佛山市", "肇庆市", "云浮市", "阳江市", "茂名市", "湛江市"]);
dsy.add("0_20", ["南宁市", "桂林市", "柳州市", "梧州市", "贵港市", "玉林市", "钦州市", "北海市", "防城港市", "崇左市", "百

色市", "河池市", "来宾市", "贺州市"]);
dsy.add("0_21", ["海口市", "三亚市", "省直辖行政单位"]);
dsy.add("0_22", ["成都市", "广元市", "绵阳市", "德阳市", "南充市", "广安市", "遂宁市", "内江市", "乐山市", "自贡市", "泸州

市", "宜宾市", "攀枝花市", "巴中市", "达州市", "资阳市", "眉山市", "雅安市", "阿坝州", "甘孜州", "凉山州"]);
dsy.add("0_23", ["贵阳市", "六盘水市", "遵义市", "安顺市", "毕节地区", "铜仁地区", "黔东南州", "黔南州", "黔西南州"]);
dsy.add("0_24", ["昆明市", "曲靖市", "玉溪市", "保山市", "昭通市", "丽江市", "思茅市", "临沧市", "德宏州", "怒江州", "迪庆

州", "大理州", "楚雄州", "红河州", "文山州", "西双版纳州"]);
dsy.add("0_25", ["拉萨市", "那曲地区", "昌都地区", "林芝地区", "山南地区", "日喀则地区", "阿里地区"]);
dsy.add("0_26", ["西安市", "延安市", "铜川市", "渭南市", "咸阳市", "宝鸡市", "汉中市", "榆林市", "安康市", "商洛市"]);
dsy.add("0_27", ["兰州市", "嘉峪关市", "白银市", "天水市", "武威市", "酒泉市", "张掖市", "庆阳市", "平凉市", "定西市", "陇

南市", "临夏州", "甘南州"]);
dsy.add("0_28", ["西宁市", "海东地区", "海北州", "海南州", "黄南州", "果洛州", "玉树州", "海西州"]);
dsy.add("0_29", ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市"]);
dsy.add("0_30", ["乌鲁木齐市", "克拉玛依市", "自治区直辖县级行政单位", "喀什地区", "阿克苏地区", "和田地区", "吐鲁番地区",

"哈密地区", "克孜勒苏柯州", "博尔塔拉州", "昌吉州", "巴音郭楞州", "伊犁州", "塔城地区", "阿勒泰地区"]);
dsy.add("0_31", ["香港特别行政区"]);
dsy.add("0_32", ["澳门特别行政区"]);
dsy.add("0_33", ["台北", "高雄", "台中", "花莲", "基隆", "嘉义", "金门", "连江", "苗栗", "南投", "澎湖", "屏东", "台东", "

台南", "桃园", "新竹", "宜兰", "云林", "彰化"]);
dsy.add("0", ["北京市", "天津市", "上海市", "重庆市", "河北省", "山西省", "内蒙古", "辽宁省", "吉林省", "黑龙江省", "江苏省

", "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "广西", "海南省", "四川省", "

贵州省", "云南省", "西藏", "陕西省", "甘肃省", "青海省", "宁夏", "新疆", "香港", "澳门", "台湾省"]);

var s = ["s1", "s2"];
var opt0 = ["省份", "地级市"];
function setup() {
    for (i = 0; i < s.length - 1; i++)
        document.getElementById(s[i]).onchange = new Function("change(" + (i + 1) + ");");
    change(0);
}

===============================

页面部分关键代码:(我是用struts1做的,当然也可以struts2或直接jsp,只要正确传参即可。要注意select的id,这个是关键,一定要和js中对应)

导入js文件略
<body onload="onloud();setup();preselect('${personInfo.country}','${personInfo.city}');">
<li>
       <em >国家或地区:</em>
           <html:select property="country" styleId="s1" styleClass="select_box" >
          <option ></option>
           </html:select>
</li>  
<li>
       <em >现居城市:</em>
            <html:select  property="city" styleId="s2" styleClass="select_box" >
             <option ></option>
         </html:select>    
</li>

</body>

© 著作权归作者所有

wangrikui
粉丝 10
博文 31
码字总数 20614
作品 0
南京
后端工程师
私信 提问
Vue.js 2.0之select级联下拉框

在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js ...

w-rain
2017/02/28
4.2K
2
Android-仿支付宝的日期选择页

描述 参考支付宝所制作的日期选择页,效果如下: 效果展示 代码已经上传至GitHub,点击查看 知识点 1、获取指定月份有多少天 2、计算指定日期是周几 3、基础架构 整个项目的结构是RecyclerVie...

黑色小老虎丶
2017/11/28
0
0
avue v1.5.0 发布,快速构建 crud 和 form 等组件的解决方案

1.5.0 说明:avue1.x版本已经趋向于稳定,将不再做新的功能增加,但会根据issuse继续持续维护和优化将更多的精力投放于avue2.0 课程视频更新 B站视频 1.Avue修仙系列之基础环境的准备和课程介...

avue_smallwei
2018/07/15
3.5K
0
基于 mpvue 框架的小程序选择组件,支持单列,多列,级联

mpvue-picker 前言 在 mpvue开源之初写了 用 vue 写小程序,基于 mpvue 框架重写 weui。当时用的是小程序的原生组件,没有对其进行封装和组件化。而对于现在的前端开发环境,,,以及已经是一...

KuangPF
2018/05/14
0
0
ajax返回的数据不能操作。

一个二级联动,用ajax来做。 比如是城市, 我选择北京,第二列会出现北京的区。 有一个人选他的住址,比如是北京,朝阳,入库。 我要回显回显。 先ajax获取第二列下拉框。 这时候如果用$("第...

刘三刀
2013/04/24
394
1

没有更多内容

加载失败,请刷新页面

加载更多

作为一个(IT)程序员!聊天没有话题?试试这十二种技巧

首先呢?我是一名程序员,经常性和同事没话题。 因为每天都会有自己的任务要做,程序员对于其他行业来说;是相对来说比较忙的。你会经常看到程序员在发呆、调试密密麻麻代码、红色报错发呆;...

小英子wep
今天
12
0
【SpringBoot】产生背景及简介

一、SpringBoot介绍 Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程,该框架使用了特定的方式来进行配置,从而使开发人员不再需要...

zw965
今天
4
0
简述并发编程分为三个核心问题:分工、同步、互斥。

总的来说,并发编程可以总结为三个核心问题:分工、同步、互斥。 所谓分工指的是如何高效地拆解任务并分配给线程,而同步指的是线程之间如何协作,互斥则是保证同一时刻只允许一个线程访问共...

dust8080
今天
6
0
OSChina 周四乱弹 —— 当你简历注水但还是找到了工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌 :#今日歌曲推荐# 分享成龙的单曲《男儿当自强》。 《男儿当自强》- 成龙 手机党少年们想听歌,请使劲儿戳(这里) @hxg2016 :刚在...

小小编辑
今天
3.3K
22
靠写代码赚钱的一些门路

作者 @mezod 译者 @josephchang10 如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。 今天给大家分享一个精彩的 GitHub 库,这个库整理...

高级农民工
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部