| 标题 | JavaScript二维数组实现的省市联动菜单 |
| 内容 | 这篇文章主要介绍了使用二维数组实现的省市联动菜单，通过二维数组存储城市列表项,需要的朋友可以参考下 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //初始化一个二维数组存储城市列表项 var cities=[ ["安庆","合肥","桐城"], ["石家庄","保定","唐山"], ["郑州","洛阳","开封"] ]; //选中某个省份时候，调用添加城市的方法 function provinceChanged(sel){ //alert("select的长度"+sel.options.length); //sel其实就是select对象 //遍历options集合，查找选中的选项 for(var x=0;x<sel.options.length;x++) { var opt=sel.options[x]; if(opt.selected) { //给被选择的城市的select 添加option addCityToSelect(x) } } } //添加选中省份下的城市项到city的select中 function addCityToSelect(x){ //从二维数组中找出对应的城市 var city=cities[x-1]; var citySelect=document.getElementById("select_city"); /*==================删除节点中已经存在的元素=============== 在第二次或第n次调用方法的时候城市select对象中已经添加了之前添加的节点，所以有清空。 思路1：select对象的removeChild(),所以通过循环遍历可以删除字节点。 思路2：直接设置select.options.length=1可以实现相同效果。 */ //设置城市的select对象下的options长度为1 citySelect.options.length=1; //设置options集合的长度，删除 //citySelect.options.length=1; for(var x=0;x<city.length;x++) { //创建元素节点对象 var optionName=document.createElement("option"); //给option设置显示内容 optionName.innerHTML=city[x]; //将创建的option添加到select citySelect.appendChild(optionName); /* 在这个地方将某一个省份下面的所有城市添加到citySelect对象下面以后 当第二次选择第二个省份的时候，第二个省份的下面的所有城市有会被追加到 citySelect节点下面。这样的效果就错了。所以要求在每次添加之前，要 对citySelect节点下面的内容进行清空。接着看： ==================删除节点中已经存在的元素=============== */ } } </script> </head> <body> <select onchange="provinceChanged(this);"> <!--this的含义：是指select对象调用provinceChanged(this),并且在此方法中 把对象本身作为参数传递，以便对其进行操作。 --> <option>请选择省份</option> <option>安徽</option> <option>河北</option> <option>河南</option> </select> <select id="select_city"> <option>请选择城市</option> </select> </body> </html> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。