首页 新闻 会员 周边

二级联动菜单解释js(原理)

0
悬赏园豆：10 [已解决问题] 解决于 2016-09-01 15:41
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" href="" />
  <style type="text/css"></style>
  <script type="text/javascript">
var city=[
 ["北京","天津","上海","重庆"],
 ["南京","苏州","南通","常州"],
 ["福州","福安","龙岩","南平"],
 ["广州","潮阳","潮州","澄海"],
 ["兰州","白银","定西","敦煌"]
 ];
function getCity(){
 var sltProvince=document.getElementById("province");
 var sltCity=document.getElementById("city");
 var provinceCity=city[sltProvince.selectedIndex-1]; 
 sltCity.length=1;
 for(var i=0;i<provinceCity.length;i++){
 sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
 }
}
 </script>
 </head>
 <body>
 <form action="somepage.asp" name=theForm">
 <select name="province" id="province" onchange="getCity()">
  <option value="0">请选择所在省份</option>
  <option value="直辖市">直辖市</option>
  <option value="江苏省">江苏省</option>
  <option value="福建省">福建省</option>
  <option value="广东省">广东省</option>
  <option value="甘肃省">甘肃省</option>
 </select>
 <select id="city" name="city">
  <option value="0">请选择所在城市</option>
 </select>
 </form>
 </body>
 </html>
复制代码解释下怎么实现的
飞离地平线的主页 飞离地平线 | 初学一级 | 园豆：16
提问于：2016-09-01 11:40
< >
分享
最佳答案
0

一个二维数组，存省市信息。

二维数组遍历行列。

 <script type="text/javascript">
//定义城市数据
var city=[
 ["北京","天津","上海","重庆"],
 ["南京","苏州","南通","常州"],
 ["福州","福安","龙岩","南平"],
 ["广州","潮阳","潮州","澄海"],
 ["兰州","白银","定西","敦煌"]
 ];
//选择省下拉框改变时触发
function getCity(){
//得到省下拉框dom
 var sltProvince=document.getElementById("province");
//得到市下拉框dom
 var sltCity=document.getElementById("city");
//得到指定市的数据通过选择的省的index（index-1是为了排除，请选择省的option）
 var provinceCity=city[sltProvince.selectedIndex-1]; 
//要调试才知道什么意思
 sltCity.length=1;
//动态给城市下拉框加数据(加<option value='测试'>测试<option/>)
 for(var i=0;i<provinceCity.length;i++){
 sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
 }
}
 </script>

 

 

收获园豆：10
小小高 | 小虾三级 |园豆：1095 | 2016-09-01 13:26

sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);这句什么意思呢？

飞离地平线 | 园豆：16 (初学一级) | 2016-09-01 14:09

@yangzailu: 

如选的是 直辖市

加

<option value='北京'>北京<option/>

<option value='天津'>天津<option/>

.....

小小高 | 园豆：1095 (小虾三级) | 2016-09-01 14:11

@小小高: sltCity[i+1] 为何加1呢

飞离地平线 | 园豆：16 (初学一级) | 2016-09-01 14:20

@yangzailu: 为了不覆盖<option value="0">请选择所在城市</option>

小小高 | 园豆：1095 (小虾三级) | 2016-09-01 14:43

@yangzailu: 你断点调试什么都清楚了。。

小小高 | 园豆：1095 (小虾三级) | 2016-09-01 14:44
其他回答(3)
0

只到市就可以？那比三级联动更简单了啊。

顾晓北 | 园豆：10844 (专家六级) | 2016-09-01 11:40

帮我解释一下js，没看懂。

支持(0) 反对(0) 飞离地平线 | 园豆：16 (初学一级) | 2016-09-01 11:45

@yangzailu: 这还有什么看不懂的啊，下拉框值改变的时候就执行getCity方法，getCity方法就是根据下拉框的选项显示省下面的市，但这都是只有市区名字，中国的行政区划是有区号和名称的，正常都不会这么做的，肯定用国家规定的行政区划，再者，你这也不全，另外，如果有点js基础就去看看http://knockoutjs.com/ 这个东西。。。

支持(0) 反对(0) 顾晓北 | 园豆：10844 (专家六级) | 2016-09-01 11:51
0

  一个二维数组，然后触发读取吧

安得浮生半日闲 | 园豆：282 (菜鸟二级) | 2016-09-01 14:33
0

给每个市一个id,然后用onchange事件当一级联动改变时触发，然后拿到当前的id，去二级联动的Json里面找对应的value对应的列表，添加进去就行了，三级联动的原理也是这个

 

凌晨肆丶的洛杉矶 | 园豆：138 (初学一级) | 2016-09-02 08:58
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。