1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 原生js实现级联下拉列表

原生js实现级联下拉列表

时间:2022-02-27 13:15:39

相关推荐

原生js实现级联下拉列表

<!DOCTYPE><html><head><title>级联下拉列表</title><meta charset="UTF-8"></head><body οnlοad="load()"><div><select class='prov' id='prov' οnchange='changeCity()'><option value=''>--请选择省--</option></select><select class='city' id='city'><option value=''>--请选择市--</option></select></div><script>var province=document.getElementById("prov");var city=document.getElementById("city");var arr_prov=new Array(new Option("--请选择省--",''),new Option("湖南","hn"),new Option("广东","gd"));var arr_city=new Array();arr_city[0]=new Array(new Option("--请选择市--",''));arr_city[1]=new Array(new Option("长沙",'cs'),new Option("娄底",'ld'),new Option("永州",'yz'));arr_city[2]=new Array(new Option("广州",'gz'),new Option("深圳",'sz'));//动态载入所有省份function load(){for(var i=0;i<arr_prov.length;i++){province.options[i]=arr_prov[i];}}//选中省份之后,根据索引动态载入相应城市function changeCity(){//清空上次的选项city.options.length=0;//获取省一级的下拉列表选中的索引var index=province.selectedIndex;for(var i=0;i<arr_city[index].length;i++){city.options[i]=arr_city[index][i];}}</script></body></html>

要点:

1.省份信息可以在页面加载时就导入

2.城市信息随着省份选择的改变而改变,故应放在省份的onchange函数内

3.本例核心:selectedIndex属性,下拉列表所选中项的索引

4.一个bug处理:若不加上“city.options.length=0”,则在city列表中,上一省份对应城市的结果会影响下一省份的城市列表(不妨试一试);故要用这条代码清空列表,消除影响。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。