文档章节

省市县三级级联

ycYinG
 ycYinG
发布于 2016/12/08 16:09
字数 456
阅读 1
收藏 0

####主要思想 1.省改变,市改变,并初始化县 2.市改变,县改变 ####html代码 <select id="sheng"> <option value="">--请选择--</option> <option value="0">北京市</option> <option value="1">河北省</option> <option value="2">山西省</option> <option value="3">内蒙古自治区</option> </select> <select id="shi"> <option value="">--请选择--</option> </select> <select id="xian"> <option value="">--请选择--</option> </select> ####主要步骤 #####1.获取元素对象 var sheng = document.getElementById('sheng'); var shi = document.getElementById('shi'); var xian = document.getElementById('xian');

2.定义市和县的数组
      var city = [
         ['昌平区', '海淀区', '朝阳区', '东城区'],
         ['石家庄市', '保定市', '张家口市', '唐山市'],
         ['太原市', '大同市', '运城市', '临汾市'],
        ['呼和浩特市', '包头市', '鄂尔多斯市', '赤峰市']
    ];
     var xians = [
	   [
	         ['北七家','回龙观','霍营'],
             ['中关村','苏州街','西二旗'],
             ['朝阳1','朝阳2','朝阳3'],
		      ['东城1','东城2','东城3'],
	   ],
	   [
            ['新华区','桥东区','桥西区'],
	        ['高碑店','白沟','定兴'],
	   ]
    ];

#####3.定义全局变量
var index = null; #####4.实现省份改变,市跟着变化的效果 sheng.onchange = function() { xian.innerHTML = '<option value="">--请选择--</option>';// 初始化xian index = this.value; // 获取option的值 var result = city[index];//根据index去city数组中获取对应的shi // 将获取的结果显示在select#shi中,循环result数组中的"每一个值",在值的两侧加上option标签 var str = '<option value="">--请选择--</option>'; for (var i = 0; i < result.length; i++) { // 将所有的拼接好的市再次拼接为一个整体 str += '<option value="'+i+'">' + result[i] + '</option>'; } shi.innerHTML = str;//将字符串写入到select#shi中 } #####5.实现市改变,获取县城的效果 shi.onchange = function(){ var value = this.value; // 获取当前的value值
var county = xians[index][value]; // 根据市获取市对应的县 var str = '<option value="">--请选择--</option>'; for (var i = 0; i < county.length; i++) { str += '<option value="'+i+'">' + county[i] + '</option>'; } xian.innerHTML = str;//将数据写入到select#xian中 }

© 著作权归作者所有

共有 人打赏支持
ycYinG
粉丝 1
博文 10
码字总数 4889
作品 0
昌平
程序员
dwz 三级联下拉菜单怎么赋值(combox组件)

用DWZ做的省市县三级联动下拉框,保存值之后编辑的时候怎么赋值聚焦呢

纯24K爷们儿
2014/05/14
1K
2
优化省市县三级联动(查询数据库)

javaWeb项目,页面实现省市县三级联动。 想到三种方法: 1.查询出所有省并显示,选择省或市,利用ajax从后台查询出对应数据,再显示。 2.查询出所有省市县,数据隐藏到页面,jquery实现联动显...

田野_7
2016/05/30
899
6
js城市三级联动效果

重点就是全国城市的json数据,逻辑就是简单的循环查找和返回对应索引。 加入变换事件的回调处理接口。 效果截图和下载地址:js城市三级联动效果下载地址 部分代码,运行前需要加入json格式城...

透笔度
2016/05/27
222
0
select2.js 的 省市县三级联动 如何添加初始化数值

@小黄鸭前端联盟 你好,想跟你请教个问题: select2.js 的 省市县三级联动 如何添加初始化数值

ziqi
2016/09/14
89
1
reactjs省市县三级联动

如何使用ReactJs+Relay+GraphQL,实现省市县三级联动的组件? 1、使用json模拟服务器端的数据 [ { "id": "1001", "name": "北京市", "children": [ { "id": "1001001", "name": "北京市", "c...

liyuanyuan
2016/10/14
802
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

49.Nginx防盗链 访问控制 解析php相关 代理服务器

12.13 Nginx防盗链 12.14 Nginx访问控制 12.15 Nginx解析php相关配置(502的问题) 12.16 Nginx代理 扩展 502问题汇总 http://ask.apelearn.com/question/9109 location优先级 http://blog....

王鑫linux
52分钟前
0
0
Nginx防盗链、访问控制、解析php相关配置、Nginx代理

一、Nginx防盗链 1. 编辑虚拟主机配置文件 vim /usr/local/nginx/conf/vhost/test.com.conf 2. 在配置文件中添加如下的内容 { expires 7d; valid_referers none blocked server_names *.tes......

芬野de博客
今天
0
0
spring EL 和资源调用

资源调用 import org.springframework.beans.factory.annotation.Value;import org.springframework.context.annotation.PropertySource;import org.springframework.core.io.Resource;......

Canaan_
今天
1
0
memcached命令行、memcached数据导出和导入

一、memcached命令行 yum装telnet yum install telent 进入memcached telnet 127.0.0.1 11211 命令最后的2表示,两位字节,30表示过期时间(秒) 查看key1 get key1 删除:ctrl+删除键 二、m...

Zhouliang6
今天
0
0
Linux定时备份MySQL数据库

做项目有时候要备份数据库,手动备份太麻烦,所以找了一下定时备份数据库的方法 Linux里有一个 crontab 命令被用来提交和管理用户的需要周期性执行的任务,就像Windows里的定时任务一样,用这...

月夜中徘徊
今天
1
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部