javascript制作省市联动等类似二级目录

以下是参考教程中的代码，使用了双重遍历。

<script>//1.创建一个二维数组用于存储省份和城市var cities = new Array(3);cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");function changeCity(val){//7.获取第二个下拉列表var cityEle = document.getElementById("city");//9.清空第二个下拉列表的option内容cityEle.options.length=0;//2.遍历二维数组中的省份for(var i=0;i<cities.length;i++){//注意，比较的是角标if(val==i){//3.遍历用户选择的省份下的城市for(var j=0;j<cities[i].length;j++){//alert(cities[i][j]);//4.创建城市的文本节点var textNode = document.createTextNode(cities[i][j]);//5.创建option元素节点var opEle = document.createElement("option");//6.将城市的文本节点添加到option元素节点opEle.appendChild(textNode);//8.将option元素节点添加到第二个下拉列表中去cityEle.appendChild(opEle);}}}}</script>

而实际上我发现一次遍历就足够了。`

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>装修产品分类</title><script>var Cata =new Array(5);Cata[0]=Array("门","窗","地面","墙面","顶面");Cata[1]=Array("沙发","床","桌子","椅子","柜架");Cata[2]=Array("厨房","卫浴");Cata[3]=Array("吊灯","壁灯","台灯");Cata[4]=Array("摆件","墙饰","镜子");function changeCata(val){var catas =document.getElementById("choice");catas.options.length=0;for(j=0;j<Cata[val].length;j++){var tex= document.createElement("option");catas.appendChild(tex);var texele =document.createTextNode(Cata[val][j]);tex.appendChild(texele);}}</script></head><body><table><tr><td>类别:  </td><td><select onchange="changeCata(this.value)"><option>--请选择--</option><option value="0">硬装</option><option value="1">家具</option><option value="2">厨卫</option><option value="3">照明</option><option value="4">家饰</option></select><select id="choice"></select></td></tr></table></body>
</html>

再写代码的时候遇到了一个坑，就是

var catas =document.getElementById("choice");catas.options.length=0;

这段定义一定要写在changeCata内部，写在函数外没有效果，和以前使用的java和python不太一样。

javascript制作省市联动等类似二级目录相关推荐

ajax省市联动案例,JQuery+Ajax制作省市联动
$(document).ready(function () { $("#Province").append("" + "--请选择--" + ...
JavaScript实现省市联动
我们经常会遇到选择省市县的下拉框.比如我们选择了省份的话,县的下拉框会自动筛选,接下来我们就做一个这样的省市联动吧!!! 先使用一个二维数组存储省份的信息: <script>var pro ...
JavaScript实现省市二级联动
JavaScript实现省市二级联动展示一下效果? 当我鼠标点击前面的省那一栏的时候后面市那一栏会出现相对应的下辖市实现思路 1. 添加相对应的select容器 2. 然后添加数据 3. ...
addoption php,无忧建站-ajax+php无刷新二级联动下拉菜单(省市联动)源码
/** * ajax无刷新二级联动下拉菜单(省市联动) * * @author arcow * @version 1.0 * @lastupdate 2005-12-29 * */ ...
用JS实现简单的省市联动
用JS实现简单的省市联动博主建了一个学习群感兴趣的小伙伴可以加入一起学习交流点我进群一起学习交流!(群里有许多的学习资料,我做过的一些网页我都上传在群里了,需要的直接下载就可 ...
Jquery实现自动生成二级目录
在博客园开通博客以后,就看到某位博友写的js自动生成目录的文章,当时觉得生成目录能给阅读带来方便,所以就直接拿来使用了.用了一段时间以后,发现只能生成一级目录,不能生成多级目录,有点美中不足.所以想着 ...
jQuery省市联动
用jQuery实现省市联动 <!DOCTYPE html> <html><head><meta charset="UTF-8">&l ...
nginx配置二级目录，反向代理不同ip+端口
场景描述: 通过二级目录(虚拟目录,应用程序)的方式访问同一ip+端口的不同应用,例如location是用户使用页面,location/admin/是管理页面,location部署在192.168.1 ...
Yii2中如何访问controller的二级目录下的控制器
Yii2默认的控制器下只有一层目录放在controller目录下,当开发的需要的时候需要在该目录下面新增一层目录也就是在controller下增加二级目录,比如controller/api/Membe ...

javascript制作省市联动等类似二级目录

javascript制作省市联动等类似二级目录相关推荐

最新文章

热门文章