联动菜单极其注意事项

来源：互联网发布：三国杀银两武将知乎编辑：程序博客网时间：2024/06/06 03:02
代码如下：
<!DOCTYPE html><html>  <head>    <title>联动菜单</title>    <meta charset="utf-8"/>  </head>  <script type="text/javascript">    //事先预置好每个省所对应的市    //0-无  1-山东  2-浙江  3-江苏    var cities = [      ["请选择"],      ["青岛","济南","烟台"],      ["杭州","宁波","温州"],      ["南京","无锡","苏州"]    ];    function change(){      //1.获取选中的省      //2.删除所有的市      //3.添加这个省的市      var pro = document.getElementById("provice");      //var pindex = pro.getAttribute("value"); null      //因为select元素下没有value属性,利用getAttribute("value")获得的      //属性值为原始html中的值,并不是页面上显示的值,而dom.value能得到页面上该属性的最新值      var pindex = pro.value;//此时pindex为string类型      //alert(typeof(pindex));//string      //alert(pindex);      var city = document.getElementById("city");      city.innerHTML = "";//此方法更简便      /*                   方法二：找到每一个子元素,遍历,删除      var options = city.getElementsByTagName("option");      for(var i=0;i<options.length;i++){    options[i].parentNode.removeChild(options[i]);      }      */      var s = cities[pindex];      for(var i=0;i<s.length;i++){        var p = document.createElement("option");        //给option元素添加value属性        p.setAttribute("value",i);//p.value="";        p.innerHTML = s[i];    city.appendChild(p);      }    }  </script>  <body>  <!-- option的内容是下拉选显示的值                     而option的value是select节点的返回值            返回的是选中的option的value的值,返回给服务器                onchange是值改变事件,当值改变时触发该事件            -->  省:  <select id="provice" onchange="change();"><!--若两次都选中山东省则事件不触发 -->    <option value="0">请选择</option>    <option value="1">山东省</option>    <option value="2">浙江省</option>    <option value="3">江苏省</option>  </select>        市:  <select id="city">    <option>请选择</option>  </select>  </body></html
0 0