二级下拉列表联动 select 网页 html5
写在前面:
- 本文只是 学院、专业 二级选择的联动下拉列。
- 学院、专业、班级 二级选择的联动下拉列,链接如下:
三级下拉列表 select 网页 html5.
一、效果展示。
二、代码。
- html代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="post" name="form_add">
<table width="100%" class="insert-tab">
<tr>
<th width="180px">学院: </th>
<td>
<select id="college" name="college" onChange="getCity()">
<option value="0">---请选择 学院:---</option>
<option value="人工智能与大数据学院">人工智能与大数据学院</option>
<option value="经济管理学院">经济管理学院</option>
<option value="人文学院">人文学院</option>
<option value="土木工程学院">土木工程学院</option>
<option value="建筑管理学院">建筑管理学院</option>
<option value="艺术与传媒学院">艺术与传媒学院</option>
<option value="电气工程与智能制造学院">电气工程与智能制造学院</option>
</select>
</td>
</tr>
<tr>
<th>专业: </th>
<td>
<select id="profession" name="profession">
<option value="0">---请选择 专业---</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
- js代码。
<script type="text/javascript">
//定义了专业的二维数组,里面的顺序跟学院的顺序是相同的。通过 selectedIndex 获得学院的下标值来得到相应的专业数组
var arry_profession=[
["软件工程","物联网工程","计算机科学与技术","数据科学与大数据技术","机器人工程","大数据"],
["会计学","国际经济与贸易","工商管理","人力资源","资产评估","市场营销","电子商务"],
["法学专业","英语专业","中文专业","汉语国际教育","文化产业管理","汉语言文学"],
["桥梁建设","城市水系统工程","铁道工程","土木工程"],
["工程造价","工程管理","房地产开发与管理","智能建造"],
["播音主持与艺术","新闻传媒","表演舞蹈","新媒体运营","广播电视编导","艺术雕塑设计"],
["机械设计制造及其自动化","机械电子工程","电气工程及其自动化","电气工程与智能控制","电缆工程","电机电器智能化"]
];
function getCity(){
//获得学院 下拉框的对象
var college_1=document.form_add.college;
//获得专业 下拉框的对象
var profession_1=document.form_add.profession;
//得到对应学院的专业数组
var college_2=arry_profession[college_1.selectedIndex - 1];
//清空学院下拉框,仅留提示选项
profession_1.length=1;
//将专业数组中的值填充到专业下拉框中
for(var i=0;i<college_2.length;i++){
profession_1[i+1]=new Option(college_2[i],college_2[i]);
}
}
</script>
- css代码。
<style type="text/css">
table{
margin-top: 200px;
margin-left: 300px;
}
select{
height: 29px;
width: 438px;
outline: none;
/*border: none;*/ /*去掉边框*/
/*color: #277de2;*/ /*字体颜色*/
border-color: #ccc;
border-radius:4px;
/*这个是去除下箭头的*/
/*appearance: none;
-moz-appearance: none;
-webkit-appearance: none;*/
}
.insert-tab{
width: 650px;
border-collapse:collapse;
border:1px solid #f2f2f2;
}
.insert-tab th,.insert-tab td{
border:0.1px solid #f2f2f2;
}
.insert-tab tr{
line-height:40px;
}
.insert-tab th{
text-align:right;
font-weight:normal;
padding-right:10px;
font-size:14px;}
.insert-tab td{
text-align:left;
padding-left:10px;
font-family: "华文楷体";
}
</style>
三、完整版代码,下载链接。
HTML文件下载链接: 二级下拉列表联动 select 网页 html5.
四、声明。
文章属于原创,如需引用请@作者,并注明出处!