js代码的三级联动简单实现

系统管理员 2023-02-25 07:10 19阅读 0赞

三级联动的难点在于二维，三维数组的创建和使用：  
var oProc=\[“安徽”,“上海”,“山东”\];  
var oCity=\[  
\[“合肥”,“淮南”,“芜湖”\],  
\[“浦东”,“闵行”,“浦西”\],  
\[“济南”,“青岛”,“枣庄”\]  
\];  
var oDist=\[  
\[  
\[“政务区”,“庐阳区”,“蜀山区”\],  
\[“田家庵区”,“大道区”,“九龙岗区”\],  
\[“镜湖区”,“鸠江区”,“三山区”\]  
\],  
\[  
\[“浦东1”,“浦东2”,“浦东3”\],  
\[“闵行1”,“闵行2”,“闵行3”\],  
\[“浦西1”,“浦西2”,“浦西3”\]  
\],  
\[  
\[“历下区”,“天桥区”,“长清区”\],  
\[“市南区”,“市北区”,“李沧区”\],  
\[“薛城区”,“市中区”,“泽成区”\]  
\]  
\];  
就是数组套数组可以分开写。  
首先呢就是定义出来你的html里面的变量  
![在这里插入图片描述][20200710193048917.png]  
var proc,city,dist;  
然后：把标签找到循环省级数组。

重点来了：

1：在循环体内部创建option，  
2：根据createTextNode创建option的内容，也就是把数组放进去，  
3:：把内容追加到option后面  
4：把option追加到省级标签后面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA0NTk2MA_size_16_color_FFFFFF_t_70]  
市级里面的内容和之前一样，前面有一点区别，需要判断是否有选择省级内容，不选的话，proc.value==-1， 把市级和区级分别初始化，如果选的话也要先初始化，再通过找到选择的省级标签，然后循环数组，重复操作那四步就好。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA0NTk2MA_size_16_color_FFFFFF_t_70 1]

，

[20200710193048917.png]: /images/20230209/92add55e56fe4dca852ddef2770866cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA0NTk2MA_size_16_color_FFFFFF_t_70]: /images/20230209/a46eb5dd09004ead942c8dde69730827.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzA0NTk2MA_size_16_color_FFFFFF_t_70 1]: /images/20230209/ce497ac1e84d4073808d5ed4486d5146.png