首页 > 代码库 > 一个简单的二级联动效果，看完之后立马你也可以写一个（有源码，纯js，带注释）
一个简单的二级联动效果，看完之后立马你也可以写一个（有源码，纯js，带注释）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<select name="channel" id="channel" onChange="getVal(this.options[this.selectedIndex].value)">
<option value="http://www.mamicode.com/请选择">-请选择-</option>
<option value="http://www.mamicode.com/即使互动">即使互动</option>
<option value="http://www.mamicode.com/光影无限">光影无限</option>
<option value="http://www.mamicode.com/乐客渠道">乐客渠道</option>
</select>
<select name="retailer" id="retailer">
<option>-请选择-</option>
</select>
</body>
<script>
//onChange="getVal(this.options[this.selectedIndex].value)"
//利用onChange事件，来获取当前选项的value
//通过this.options拿到当前select的所有option选项
//通过this.selectedIndex拿到被选选项的索引号
//这样就能拿到每次选项的value值，然后再用数据进行匹配，拿到该选项的相应的数据，并填充到下一个select//定义数据Array＝[["value","数据1|数据2｜数据3"],["value","数据1|数据2｜数据3"]]。
//定义数据里的value与你option里的value一致
var valArray = [["即使互动","即使互动1|即使互动2|即使互动3|即使互动4"],["光影无限","光影无限1|光影无限2|光影无限3|光影无限4"],["乐客渠道","乐客渠道1|乐客渠道2|乐客渠道3|乐客渠道4"],["请选择","-请选择-"]]
function getVal(currVal)
{
//当前所选择的项 ，通过参数 currVal 获得
var currVal = currVal;
//提前声明变量，记住javascript只有函数作用域，没有块级作用域，提前声明是一个好习惯
var i,j;
//清空子下拉选单 document.all.id 选中子id
//如果你不知道document.all，可以查找相关资料哦
document.all.retailer.length = 0 ;for (i = 0 ;i <valArray.length;i++)
{
//得到 当前项 在 数组中的位置
if(valArray[i][0]==currVal)
{
//得到 当前项 所有的子数据
var tmpValArray = valArray[i][1].split("|")
for(j=0;j<tmpValArray.length;j++)
{
//填充 下拉选单
document.all.retailer.options[document.all.retailer.length] = new Option(tmpValArray[j],tmpValArray[j]);
}
}
}
}
//看完之后，要不要自己动手练一下呢？
//有没有发现也很简单呢，也许你也可以考虑一下三级联动
//整体思路就是，获取你当前选项，准备好有规律的数据格式，用当前选项的值去你的数据里匹配，然后把匹配的值填充到下一个select里面，填充之前记得清空一下哦。
</script>
</html>
一个简单的二级联动效果，看完之后立马你也可以写一个（有源码，纯js，带注释）