三级联动
在日常生活中经常会看到的一些列表框，例如网购选地址，会先选择省，然后是市，
最后是区，这个就是通过js的二级联动实现。
下面先写三个列表框出来：
<select id=\"sh...
三级联动
在日常生活中经常会看到的一些列表框，例如网购选地址，会先选择省，然后是市，
最后是区，这个就是通过js的二级联动实现。
下面先写三个列表框出来：
<select id=\"shengid\"></select>
<select id=\"shiid\"></select>
<select id=\"qvid\"></select>
三个下拉框写出来，先不在里面写东西。
然后写js代码，首先要写一个二维数组，二维数组里存放的就是想要在下拉列表里出现的数据。
例如：
var array=[[1,\"河北\",0],[2,\"山西\",0],
[3,\"邯郸\",1],[4,\"石家庄\",1],
[5,\"运城\",2],[6,\"太原\",2],
[7,\"邯山区\",3],[8,\"丛台区\",3],
[9,\"新华区\",4],[10,\"桥西区\",4],
[11,\"曹县\",5],[12,\"单县\",5],
[13,\"闻喜\",6],[14,\"夏县\",6]];
先写省的函数，省的函数应该是用页面加载onload事件写在body里面。
<body onload=\"sheng()\">
省的函数：
// 用来加载省的数据
function sheng(){
// 获取省的对象
var shengObj = document.getElementById(\"shengid\");
// 获取市对象
var shiObj = document.getElementById(\"shiid\");
// 获取区对象
var qvObj = document.getElementById(\"qvid\");
//初始化
var str = \"<option value=0> 请选择 </option>\";
for(var i=0; i<arr.length; i++){
// 判断上级id 为0，如果是0，代表是省
if(arr[i][2]==0){
str += \"<option value=\"+arr[i][0] +\"> \" + arr[i][1] +\"</option>\";
}
}
shengObj.innerHTML = str;
shiObj.innerHTML = \"<option value=0> 请选择 </option>\";
qvObj.innerHTML = \"<option value=0> 请选择 </option>\";
}
之后是市的函数，市的函数应该放在省的select标签里面，使用内容改变事件：
<select id=\"shengid\" onchange=\"shi()\"></select>
市的函数：
//加载对应市数据
function shi(){
//获取省的对象
var shengObj=document.getElementById(\"shengid\");
//获取市对象
var shiObj=document.getElementById(\"shiid\");
//获取区对象
var qvObj=document.getElementById(\"qvid\");
var str = \"<option value=0> 请选择 </option>\";
for(var i=0; i<arr.length; i++){
// 根据上级id 拼接数据
if(arr[i][2]==shengObj.value && shengObj.value != 0){
str += \"<option value=\"+arr[i][0] +\"> \" + arr[i][1] +\"</option>\";
}
}
shiObj.innerHTML = str;
qvObj.innerHTML = \"<option value=0> 请选择 </option>\";
}
最后是区的函数，区的函数放在市的select里面，用的依然是内容改变事件：
<select id=\"shiid\" onchange=\"qv()\"></select>
区的函数：
//加载对应区数据
function qv(){
//获取市对象
var shiObj = document.getElementById(\"shiid\");
//获取区对象
var qvObj = document.getElementById(\"qvid\");
var str = \"<option value=0> 请选择 </option>\";
for(var i=0; i<arr.length; i++){
// 根据上级id 拼接数据
if(arr[i][2]==shiObj.value && shiObj.value != 0){
str += \"<option value=\"+arr[i][0] +\"> \" + arr[i][1] +\"</option>\";
}
}
qvObj.innerHTML=str;
}
三级联动效果已经可以实现了，若要提交的话还要加一个非空验证，写在提交的单击事件内，代码如下：
function feinull(){
var qvObj = document.getElementById(\"qvid\");
if( qvObj.value == 0){
alert(\"必选\");
}else{
alert(\"通过\");
}
}
使用弹框了，想要使用span标签的话，同理。
仅记录学习。
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
上一篇：Q#入门理论：量子比特状态向量 下一篇：Q#入门理论：量子比特状态观测
