文档章节

省市县三级级联

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

没有更多内容

加载失败,请刷新页面

加载更多

自定义Ubuntu/Windows双系统引导菜单主题

学习Linux自然少不了要装双系统,其中Ubuntu便是我们用的最多的Linux系统。装完双系统后,Ubuntu会自动生成grub开机引导及菜单,及其丑陋,而且很多我们用不到的选项。今天我们就介绍burg:修...

Linux就该这么学
5分钟前
0
0
Go 并发(二)

Go Mutex 通过Mutex和信道处理竞态条件。 临界区 当程序并发运行时,多个协程不应该同时访问那些修改共享资源的代码,这些修改共享资源的代码称为临界区。 Go中通过Mutex可以避免同时访问临界...

春哥大魔王的博客
8分钟前
0
0
CentOS 7安装和部署Docker

Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker 。通过 uname -r 命令查看你当前的内核版本 uname -r3.10.0-514.el7.x86_64 1、...

狼王黄师傅
12分钟前
0
0
php扩展可以通过pecl 或者phpize 安装

pecl 算是 php 扩展的一个官方聚合平台,一些比较有名,有特点的扩展会被 pecl 收录,收录后可以通过 pecl 的方式安装。但是更多的扩展是没有收录在 pecl 上的,这些扩展还是需要通过 phpize...

bengozhong
12分钟前
0
0
CentOS中如何安装7ZIP

执行以下命令下载安装: wget http://nchc.dl.sourceforge.net/project/p7zip/p7zip/9.20.1/p7zip_9.20.1_src_all.tar.bz2tar -jxvf p7zip_9.20.1_src_all.tar.bz2cd p7zip_9.20.1make......

凯文加内特
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部