文档章节

省市县三级级联

ycYinG
 ycYinG
发布于 2016/12/08 16:09
字数 456
阅读 1
收藏 0
点赞 0
评论 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 ⋅ 2

优化省市县三级联动(查询数据库)

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

田野_7 ⋅ 2016/05/30 ⋅ 6

省市县三级联动-数据为字符串

一段省市县三级联动代码,其省市县数据位字符串,几年前看见从网上摘录下来整理的! AreaGB-T-2260-1999.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCT...

城邑耕夫 ⋅ 2012/04/17 ⋅ 2

js城市三级联动效果

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

透笔度 ⋅ 2016/05/27 ⋅ 0

select2.js 的 省市县三级联动 如何添加初始化数值

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

ziqi ⋅ 2016/09/14 ⋅ 1

reactjs省市县三级联动

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

liyuanyuan ⋅ 2016/10/14 ⋅ 0

php中如何把一个二维数组写成xml或者json格式的,前提是不知道数组元素的个数

php开发中,想自己写一个mysql+ajax的省市县三级联动,一切都写好了,就等着返回xml或者json格式的数据了。 查询是:$sql="select * from cities where sid=1";//1为江苏省的id.这个不用多说...

梦碎年代 ⋅ 2012/08/14 ⋅ 11

级联菜单删除默认数据

每次打开页面,省市县的数据都默认在上面,怎么去掉,手动选择????向各位大神们请教!!!

java菜鸟猿 ⋅ 2016/09/30 ⋅ 1

OpenCart2.1 中文社区版(免费下载)

此版本在英文版2.1.0.2基础上修改衍生而来,严格遵循OC的mvc架构,根据国内用户习惯进行了大量的修改工作(未修改内核)。 opencart中文版本可以基本兼容opencart.com上的模块插件和模板,另外...

OpenCart官方 ⋅ 2016/05/17 ⋅ 17

改进fastjson的WriteClassName特性时的输出数据容量

在使用fastjson输出省市县三级信息时,数量高达300K,由于我们的数据结构相同,因此每个类都输出了完整的类名称 因此,是否可以采用索引方式用简单的数字引用达到减轻很长类名称的作用呢? ...

阿阮 ⋅ 2015/07/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

BS与CS的联系与区别【简】

C/S是Client/Server的缩写。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、InFORMix或 SQL Server。客户端需要安装专用的客户端软件。 B/S是Brower/...

anlve ⋅ 45分钟前 ⋅ 0

发生了什么?Linus 又发怒了?

在一个 Linux 内核 4.18-rc1 的 Pull Request 中,开发者 Andy Shevchenko 表示其在对设备属性框架进行更新时,移除了 union 别名,这引发了 Linus 的暴怒。 这一次 Linus Torvalds 发怒的原...

问题终结者 ⋅ 今天 ⋅ 0

在树莓派上搭建一个maven仓库

在树莓派上搭建一个maven仓库 20180618 lambo init 项目说明 家里有台树莓派性能太慢。想搭建一个maven私服, 使用nexus或者 jfrog-artifactory 运行的够呛。怎么办呢,手写一个吧.所在这个...

林小宝 ⋅ 今天 ⋅ 0

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 今天 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 今天 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部