黑马程序员技术交流社区

标题: 求DOM三级联动菜单思路 [打印本页]
作者: Godream    时间: 2013-8-7 22:48
标题: 求DOM三级联动菜单思路
按照老师的视频，知道了怎么去写二级联动菜单。
我想在二级菜单的基础上加个三级菜单。例如省-市-县。
我想在开始选择省的时候，后面的市就有默认的，区或者县也有默认的。
写的时候发现似乎要定义N个数组。我只拿了几个省市做例子。
是不是还得在城市下拉菜单那再加一个事件，那又怎么保证选择省的时候，二级的市和三级的区/县都有默认呢？？？
求思路？？？？？
下面是根据老师的视频写的二级联动菜单。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. select{
  8.         width:100px;
  9. }
  10. </style>

  12. <script type="text/javascript">
  13. function selcity()
  14. {
  15.         /*
  16.         定义数据对应关系
  17.         城市有很多，所以通过数组存储，每一个省对应一个城市数组，怎么建立对应关系呢？
  18.         每一个省都有自己的角标。通过角标和数组建立对应关系，这就是二维数组。
  19.        
  20.         */
  21.         var arr=[['--选择城市--'],
  22.                             ['海淀区','朝阳区','东城区','西城区'],
  23.                                 ['长沙市','湘潭市','娄底市','怀化市'],
  24.                                 ['沈阳市','大连市','鞍山市','抚顺市'],
  25.                                 ['济南市','青岛市','廊坊市','济宁市'],
  26.                                 ['石家庄市','保定市','唐山市','邯郸市']];
  27.        
  28.         //获取选择的省的角标
  29.         var selNode=document.getElementById("selid");
  30.         var index=selNode.selectedIndex;
  31.         var cities=arr[index];
  32.        
  33.         var subselNode=document.getElementById("subselid");
  34.        
  35.         //清除上一次选择的子菜单内容。
  36.         /*
  37.         for(var x=0;x<subselNode.options.length;)
  38.         {
  39.                 subselNode.removeChild(subselNode.options[x]);       
  40.         }
  41.         */
  42.        
  43.         //有更简单的清除方式，只要改变下拉菜单的长度即可。
  44.         subselNode.options.length=0;
  45.        
  46.         for(var x=0;x<cities.length;x++)
  47.         {
  48.                 var optNode=document.createElement("option");
  49.                
  50.                 optNode.innerHTML=cities[x];
  51.                
  52.                 subselNode.appendChild(optNode);
  53.                
  54.         }
  55.        
  56. }
  57. </script>

  59. </head>

  61. <body>
  62. <select id="selid" onchange="selcity()">
  63.         <option>--选择省市--</option>
  64.     <option>北京市</option>
  65.     <option>湖南省</option>
  66.     <option>辽宁省</option>
  67.     <option>山东省</option>
  68.     <option>河北省</option>
  69.    
  70. </select>

  72. <select id="subselid">
  73.         <option>--选择城市--</option>
  74. </select>


  77. </body>
  78. </html>
复制代码




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2