JavaScript实现省市区的三级联动
JavaScript实现省市区的三级联动
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <div id="div1"> </div> <script type="text/javascript"> /* 创建省 */ var provinceAr = ["湖北省","吉林省","湖南省"]; var province = document.createElement("select"); var province_one = document.createElement("option"); var province_one_value = document.createTextNode("请选择省"); province_one.appendChild(province_one_value); province.appendChild(province_one); document.getElementById("div1").appendChild(province); for(var i = 0; i < provinceAr.length; i++){ province_one = document.createElement("option"); province_one_value = document.createTextNode(provinceAr[i]); province_one.appendChild(province_one_value); province.appendChild(province_one); } /* 创建市 */ var cityAr = [ ["襄阳市","武汉市","荆门市","恩施市"], ["长春市","四平市","松原市"], ["长沙市","岳阳市","益阳市"], ]; province.id = "proi";//给省添加id var city = document.createElement("select"); document.getElementById("div1").appendChild(city); var city_one = document.createElement("option"); var city_one_value = document.createTextNode("请选择市"); city_one.appendChild(city_one_value); city.appendChild(city_one); city.id="cityI";//给市添加id /* 创建县 */ var townAr = [ [ ["樊城区","襄州区","襄城区"], ["江汉区","汉阳区","武昌区"], ["京沙县","沙洋县","东宝区"], ["舞阳坝街道","小渡船街道","六角亭街道"] ], [ ["南关区 ","朝阳区","宽城区"], ["铁东区","铁西区","梨树县"], ["宁江区","乾安县","长岭县"] ], [ ["长沙县 ","宁乡县","浏阳市"], ["湘阴县","岳阳县","华容县"], ["安化","桃江","南县"] ] ]; var town = document.createElement("select"); var town_one = document.createElement("option"); var town_one_value = document.createTextNode("请选择县"); town_one.appendChild(town_one_value); town.appendChild(town_one); document.getElementById("div1").appendChild(town); /* onchange拼写出错可能导致进程终止*/ province.onchange = function(){ var index = document.getElementById("proi").selectedIndex;//给select一个索引值 city.innerHTML=""; if(index==0){ var city_one = document.createElement("option"); var city_one_value = document.createTextNode("请选择市"); city_one.appendChild(city_one_value); city.appendChild(city_one); town.innerHTML=""; var town_one = document.createElement("option"); var town_one_value = document.createTextNode("请选择县"); town_one.appendChild(town_one_value); town.appendChild(town_one); } else { var cityValues = cityAr[index-1]; var townValu = townAr[index-1];//townValu为一个二维数组 console.log(cityValues); console.log(townValu); for(var i = 0; i < cityValues.length; i++){ var city_one = document.createElement("option"); var city_one_value = document.createTextNode(cityValues[i]); city_one.appendChild(city_one_value); city.appendChild(city_one); } var tor = townValu[0]; console.log(tor); town.innerHTML=""; for(var i = 0; i < tor.length; i++) { var town_one = document.createElement("option"); var town_one_value = document.createTextNode(tor[i]); town_one.appendChild(town_one_value); town.appendChild(town_one); } city.onchange=function(){ var indexc = document.getElementById("cityI").selectedIndex; var townVa = townValu[indexc]; town.innerHTML=""; console.log(townVa); for(var i = 0; i < townVa.length; i++) { var town_one = document.createElement("option"); var town_one_value = document.createTextNode(townVa[i]); town_one.appendChild(town_one_value); town.appendChild(town_one); } } } } </script> </body> </html>
调试
备注
- .innerHTML=" "的作用是为了清空select下的option样式,若不清空可能会导致select索引值发生改变
参考链接
http://www.w3school.com.cn/xmldom/met_document_createelement.asp(createElement() 方法)
http://www.w3school.com.cn/jsref/prop_option_index.asp(HTML DOM index属性)
JavaScript实现省市区的三级联动的更多相关文章
- 省市区(县)三级联动代码(js 数据源)
ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...
- JQuery实现省市区的三级联动
JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...
- js之省市区(县)三级联动效果
省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- 中国省市区地址三级联动插件---jQuery Distpicker
插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github ...
- 省市区js三级联动(原创)
看了一些网上的js三级联动,但感觉不是缺这,就是少那,决定亲自操刀写了一个,现记录如下,以备后用! <!DOCTYPE html> <html> <head> &l ...
- 转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
- 原生JavaScript的省市县三级联动
三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的. <!DOCTYPE html> < ...
- 用php和ajax写一个省市区的三级联动,实现地区的下拉选择
要实现这个页面的三级联动,我们需要建立三个php文件,第一个php文件我们导入jQuery文件,里面嵌入JavaScript:第二个php文件我们做一个php的处理页面,里面引入我们封装好的数据库类文 ...
随机推荐
- Word中的段落
Word文档中的块级内容的最基本单位是段落,段落用<p>元素进行存储.段落定义在新行中开始,段落可以包含三方面的信息:可选的段落属性.内嵌的内容(通常为文本)和用于比较两个文档的内容的一组 ...
- freeRTOS与裸机程序相比有什么区别??
FreeRTOS命名及变量规则 初学FreeRTOS的用户对其变量和函数的命名比较迷惑, FreeRTOS的核心源代码遵从MISRA编码标准指南,关于MISRA编码标准,可以查看文章https: ...
- Ubuntu 16.04虚拟机调整窗口大小自适应Windows 7
Windows 7上Ubuntu 16.04虚拟机安装成功后,默认的虚拟机窗口比较小,需要适当调整,才能把虚拟机的屏幕放大, 适合使用,以下介绍调整方法. 安装VMware Tools 启动虚拟机, ...
- react中使用阿里Viser图表
参考demo的codesandbox:https://codesandbox.io/s/kxxxx3w5kv 使用步骤: 1. 安装依赖 viser-react和@antv/data-set 2 ...
- 使用 JSON-lib 出现异常 java.lang.reflect.InvocationTargetException
我是在使用json时引起的这个异常,上面是使用json-lib用到的几个jar包,原因是在commons-lang3-3.1.jar这个jar上,commons-lang3和commons-lang会 ...
- itext7知识点研究(PDF编辑)
取出pdf文档文字 String sourceFolder2 = "E:\\picture2\\租赁合同2.pdf"; PdfDocument doc = new PdfDocum ...
- Shell-3--变量
用户自定义变量 环境变量 位置参数变量 预定义变量
- harbor镜像仓库-02-https访问配置
harbor镜像仓库-02-https访问配置 harbordockerhttps harbor搭建部署参考上一章节 harbor镜像仓库-01-搭建部署 Harbor默认使用http,给harbor ...
- linux下的shell脚本的使用
什么是shell? Shell是一个命令解释器,它在操作系统的最外层,负责直接与用户进行对话,把用户的输入解释给操作系统,并处理各种各样的操作系统的输出结果,输出到屏幕反馈给用户.这种对话方式可是交互 ...
- java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for com.bjsxt.mapper.PeopleMapper
报错信息: Type Exception Report Description The server encountered an unexpected condition that prevente ...