JavaScript数组应用,关联下拉菜单实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //map形式 键值对 var cityList = []; cityList["湖南省"] = ["长沙市","株洲市","湘潭市"]; cityList["湖北省"] = ["武汉市","黄冈市","十堰市"]; cityList["广东省"] = ["广州市","深圳市","东莞市"]; function loadCity(){ var prov=document.getElementById("selProv").value; //清空之前的选项 document.getElementById("selCity").options.length=1; for(var i in cityList[prov]){ //创建option,值为cityList[ind-1][i] var op=new Option(cityList[prov][i]); //把new出来的option塞进城市select document.getElementById("selCity").options.add(op); } } </script> </head> <body> <div> <p>省份:<select id="selProv" onchange="loadCity()"> <option>====请选择====</option> <option>湖南省</option> <option>湖北省</option> <option>广东省</option> </select></p> <p>城市:<select id="selCity"> <option>====请选择====</option> </select></p> </div> </body> </html>
效果是第一个下拉框点击湖南省,另一个下拉框动态的变成长株潭、同样的点击别的第二个就会动态变成那个省的城市
这里使用数组使用的是键值对的形式(map形式),也可以定义二维数组,就像是ArrayList集合一样
不错哦,还挺详细的