JavaScript 二级联动

来源：互联网发布：声级计软件编辑：程序博客网时间：2024/04/30 09:39

思路：

 <body>    省份:<select id="province">    <option value="">请选择</option><option value="河北省">河北省</option><option value="广西省">广西省</option><option value="山东省">山东省</option>    </select>城市:<select id="city">    <option value="">请选择</option>    </select>  </body>

1.首先根据id为province获取当前标签.

2.根据this.value得到当前选择的值.比如山东.

3.创建一个数组，包含省份下的城市.

4.根据当前选择的省份，遍历省份.

5.创建option节点..添加到id为city的标签下

6.测试发现，每次切换的时候要清空当前省份的所有孩子节点
代码：

<script type="text/javascript">  document.getElementById("province").onchange=function(){var provinceElement=this.value;var city=document.getElementById("city");var options=city.getElementsByTagName("option");for(var i=options.length-1;i>0;i--){city.removeChild(options[i]);}var arry;if(provinceElement=="河北省"){array=["邢台","石家庄","唐山","邯郸","保定"];}else if(provinceElement=="广西省"){array=["桂林","南宁","柳州","玉林"];}else{array=["济南","青岛","烟台","威海"];}for(var i=0;i<array.length;i++){var op=document.createElement("option");op.setAttribute("value",array[i]);var text=document.createTextNode(array[i]);op.appendChild(text);city.appendChild(op);}}  </script>

1 0