css+js 版本的二级二级联动选择菜单

最新推荐文章于 2021-08-04 10:05:15 发布

hpugym

最新推荐文章于 2021-08-04 10:05:15 发布

阅读量1.6k

点赞数

分类专栏： Web开发

本文链接：https://blog.csdn.net/hpugym/article/details/47421131

版权

Web开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.111cn.net</title>
<script type="text/javascript">
//定义了分类的二维数组，里面的顺序跟外表的顺序是相同的。通过selectedIndex获得不同大类的下标值来得到相应的分类数组
     var item=[
                [["shuxue","数学类"],["wuli","物理类"],["huaxue","化学类"],["shengwu","生物类"],["dizhi","地质类"],["dili","地理类"]],
                [["computer","计算机类"],["tongxun","通讯工程类"],["auto","机械及其自动化类"],["tumu","土木类"],["huanjing","环境类"],["chelaing","车辆类"],["jianzhu","建筑类"]],
                [["economy","经济类"],["low","法律类"],["manage","管理类"],["language","语言类"]],
                [["kaoyangE","考研英语"],["kaoyansM","考研数学"],["kanyanP","考研政治"]]   
              ];
     function getItem(){
         //获得大类下拉框的对象
         var sltarea=document.forms[0].area;
         //获得小类下拉框的对象
         var sltItem=document.forms[0].item;
         //得到对应大类的城市数组
         var areaItem=item[sltarea.selectedIndex - 1];
         //清空小类下拉框，仅留提示选项
         sltItem.length=1;
         //将小类数组中的值填充到城市下拉框中
         for(var i=0;i<areaItem.length;i++){		 
		 //获得小类名称值areaItem[i][1]		//获得小类名称的下标areaItem[i][0]
		 //如果都选值 sltItem[i+1]=new Option(areaItem[i][1],areaItem[i][1]);
             sltItem[i+1]=new Option(areaItem[i][1],areaItem[i][0]);
         }
     }
</script>
</head>
<form name="f1"   action="" method="post">
<table>
   <tr><td>请选择资源分类<font color="red">*</font></td>
    <td>
      <select name="area" onChange="getItem()">
        <option value="null" selected="selected">请选择</option>
        <option value="like">理科类</option>
        <option value="gongke">工科类</option>
        <option value="wenke">文科类</option>
        <option value="other">其他类</option>
      </select>
      <select name="item">
        <option selected="selected" value="null">请选择二层分类</option>
      </select> <input type="submit" value="Go" name="" />
     </td>
    </tr>
</table>
</form>
<?php
print_r($_POST);