原生js实现三级联动

学习自于 http://blog.csdn.net/Elenal/article/details/51493510

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><form action="" name="theform"><select name="province" onchange="getCity()"><option value = "0">请选择所在的省份</option><option value="1">浙江省</option><option value="2">山东省</option><option value="3">广东省</option> <option value="4">甘肃省</option> </select><select id="city" onchange="getQu()"><option value = "0">请选择所在的城市</option></select><select name = "qu"><option value = "0">请选择所在的县区</option></select></form><script>//按照省份的下拉列表的顺序定义二维数组  将城市列表对应到省份下
var city=[["杭州市","温州市","宁波市","绍兴市"],//浙江省["济南市","青岛市","济宁市","潍坊市"],//山东省["广州市","潮阳","澄海","潮州"],//广东省["兰州市","白银","敦煌","定西"]//甘肃省];//县区数组var qu=[[["杭州一区","杭州二区"],["温州一区","温州二区"],["宁波一区","宁波二区"],["绍兴一区","绍兴二区"]],[["济南一区","济南二区"],["青岛一区","青岛二区"],["济宁一区","济宁二区"],["潍坊一区","潍坊二区"],],[["广州一区","广州二区"],["潮阳一区","潮阳二区"],["澄海一区","澄海二区"],["潮州一区","潮州二区"],],[["兰州一区","兰州二区"],["白银一区","白银二区"],["敦煌一区","敦煌二区"],["定西一区","定西二区"],]];var getProvince = document.forms['theform'].province;var City = document.forms[0].city;var Qu = document.forms[0].qu;function getCity(){// 初始化Qu.length = 1;City.length = 1;// 获得 省份选择的项（索引值，0开始）var getSelectIndex = getProvince.selectedIndex;// 匹配选择省下面的 市区var proCity = city[getSelectIndex-1]; // console.log( proCity)for( var i=0; i<proCity.length; i++){City[i+1] = new Option(proCity[i],getSelectIndex)}}function getQu(){var getSelectIndex = getProvince.selectedIndex;  // 省var getCitySelectedIndex = City.selectedIndex; // 市console.log( getCitySelectedIndex )var cityQu = qu[getSelectIndex - 1][ getCitySelectedIndex - 1];console.log( cityQu )for( var i=0; i<cityQu.length; i++){Qu[i+1] = new Option(cityQu[0],getCitySelectedIndex)}}
</script>

转载于:https://www.cnblogs.com/ar13/p/8000689.html

原生js实现三级联动相关推荐

原生js写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...
原生JS写三级联动 --省--市--区
效果如下: css代码 <style>select{width: 100px;height: 30px;} </style> html代码 <div id="b ...
插件原生js 省市区三级联动源码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
原生js省市区三级联动
html模板 <form class="mainLeft" onsubmit="formSubmit(event)"><select id=& ...
js原生，省市区三级联动插件
js原生,省市区三级联动插件 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
纯JS省市区三级联动
效果如图所示: HTML Code: [html] view plain copy <html> <head> <script type="text/javas ...
QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
使用JS实现三级联动
利用js实现三级联动直接放代码: <div class="wrapper">省:<select id="province" onchange ...
JS 省市区三级联动
JS 省市区三级联动:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

原生js实现三级联动

学习自于 http://blog.csdn.net/Elenal/article/details/51493510

原生js实现三级联动相关推荐

最新文章

热门文章

原生js实现三级联动

学习 自 于 http://blog.csdn.net/Elenal/article/details/51493510

原生js实现三级联动相关推荐

最新文章

热门文章

学习自于 http://blog.csdn.net/Elenal/article/details/51493510