javascript二级联动下拉框的实现

原创 PHP笔记  2017-04-07 20:07  阅读 3,279 views 次

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/hmtl; charset=utf-8" ><!--PHP中午乱码处理-->
<title>javascript二级联动下拉框的实现_PHP笔记</title>
</head>
<body align="center">
<script type="text/javascript">
var arr=[ 
 ["html","css","javascript"], 
 ["php基础","php高级"], 
 ["ACCESS","MSSQL","MYSQL","ORACLE"], 
 ]; //二维数组
function cg(){
var arr1=new Array();
var i=document.forms["myform"];
i[1].length=1; //清除option元素,保留原有的一项;
if(i[0].value=="WEB前端"){
 arr1=arr[0];}
if(i[0].value=="PHP学习"){
 arr1=arr[1];}
if(i[0].value=="数据库"){
 arr1=arr[2];}
for(var j=0;j<arr1.length;j++){
 var option = new Option(arr1[j],arr1[j]); /*创建option元素*/ 
 i[1].options.add(option); /*增加option元素*/ 
 }
}
</script>
<br/>
<form action="#" name="myform" method="post">
<select onChange="cg()"> 
 <option value="0">请选择</option> 
 <option value="WEB前端">WEB前端</option> 
 <option value="PHP学习">PHP学习</option> 
 <option value="数据库">数据库</option> 
</select> 
<select > 
 <option value="0">请选择</option> 
</select> 
</form>
</body>
</html>

运行结果:

 

本文地址:https://www.ggbiji.com/js-linkage-select.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情

  1. 惠帮帮
    惠帮帮 @回复

    很好的文章,感谢博主