您的位置：首页 > Web前端 > JavaScript

简单的二级联动js

2018-01-23 15:22 316 查看

马上本小白又要做一个项目的一个小模块了，然后看到里面有个二级联动，其实就是挺简单的那种，但是我还是想记录一下咯！过几天就要用到了嘛！

要求呢：就是两个下拉菜单，一个是请选择电器种类（洗衣机、空调、冰箱），另一个是请选择电器类型（不同电器对应不同的电器类型），好，就是这样简单。下面开始看代码。

<!doctype html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>二级联动</title>
</head>
<body>
<select id="selectOne"></select>
<select id="selectTwo"></select>
</body>
<script>
var selectOne=document.getElementById("selectOne");
var selectTwo=document.getElementById("selectTwo");
/*电器种类数组*/
var arr1=['洗衣机','空调','冰箱'];
/*电器类型数组 定义成二维数组*/
var arr2=[['请选择洗衣机类型','大眼机','翻盖机','欧洲窄身机'],['请选择空调类型','窗机','分体式空调'],[]];
/*先输出第一个下拉菜单*/
selectOne.innerHTML="";
for(var i=0;i<arr1.length;i++){
selectOne.innerHTML+="<option>"+arr1[i]+"</option>";
}
/*默认输出第一个下拉菜单对应的内容*/
for(var i=0;i<arr2[0].length;i++){
selectTwo.innerHTML+="<option>"+arr2[0][i]+"</option>";
}
/*定义onchange事件 根据index输出对应的内容 务必清空*/
selectOne.onchange=function(){
var index=this.selectedIndex;
/*冰箱是没有类型的，所以特殊处理*/
if(index === 2){
selectTwo.innerHTML="";
selectTwo.style.display = 'none';
}
/*其他情况，洗衣机，空调*/
else{
selectTwo.innerHTML="";
selectTwo.style.display = 'inline-block';
for(var i=0;i<arr2[index].length;i++){
selectTwo.innerHTML+="<option>"+arr2[index][i]+"</option>";
}
}
}
</script>
</html>

好啦，可以复制粘贴代码直接在本地运行一下。到时候我还要根据需求进行相应修改吧，在此记录一下咯！

还有第二种方法，上代码

<!doctype html>
<html>
<head>
<title> 二级联动 </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script language="JavaScript" type="text/javascript">
//定义了电器类别的二维数组
var arr=[
["大眼机","翻盖机","欧洲窄身机"],
["窗机","分体式空调"],
[]
];
function getElec(){
var selectOne=document.form1.one;
var selectTwo=document.form1.two;
var arr1=arr[selectOne.selectedIndex - 1];
//清空下拉框，仅留提示选项
selectTwo.length=1;
//将二维数组中的值填充到第二个下拉框中
for(var i=0;i<arr1.length;i++){
selectTwo[i+1]=new Option(arr1[i],arr1[i]);
}
}
</script>
</head>
<body>
<form method=POST action="" name="form1">
<select name="one" onChange="getElec()">
<option value="0">请选择电器种类 </option>
<option value="洗衣机">洗衣机 </option>
<option value="空调">空调 </option>
<option value="冰箱">冰箱 </option>
</select>
<select name="two">
<option value="0">请选择电器类型 </option>
</select>
</form>
</body>
</html>

好，结束咯！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 二级联动

相关文章推荐

新的分享

章节导航