二级联动菜单实例（菜鸟级）

最新推荐文章于 2021-04-18 08:45:03 发布

rebornsgundam

最新推荐文章于 2021-04-18 08:45:03 发布

阅读量1.1k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/rebornsgundam/article/details/8601900

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

写了个最简单的实现省份和相应城市的联动菜单，开发思路：首先在页面上定义两个下拉菜单的标签，一个用于省份，另一个用于城市；然后，将省份和城市的数据用Javascript的二维数组进行保存，这样就可以将不同省份的城市区分出来；其次，初始化两个下拉菜单，填充第一个省份和相应城市的数据；最后，对两个下拉菜单监听onchange事件，并完成事件发生后的函数，动态地修改城市下拉菜单的内容和用户选择后的结果。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var where = new Array();
where[0] = new Array("==请选择省份==","==请选择城市==");
where[1] = new Array("四川","|成都|绵阳|德阳|自贡|攀枝花");
where[2] = new Array("贵州","贵阳|六盘水|遵义");
where[3] = new Array("云南","|昆明|大理");
//用于显示用户选择的省份和城市信息
var msg = new Array('','');
//初始化下拉菜单列表
function init(){
var province = document.getElementById('province');
//获得省份菜单对象
var city = document.getElementById('city');
//获得城市菜单对象
//初始化省份下拉菜单
for(var i=0;i<where.length;i++){
  //当省份下拉菜单创建新的选项
  province.options[i] = new Option(where[i][0],where[i][0]);
}
//初始化城市下拉菜单
city.options[0] = new Option(where[0][1],where[0][1]);
}
//当省份选择改变时调用此函数
function selectProvince(){
var province = document.getElementById('province');
//获得省份菜单对象
var city = document.getElementById('city');
//获得城市菜单对象
var result = document.getElementById('result');
//获得信息显示对象
var value = province.value;
//当前选择的省份
//动态改变城市下拉菜单的内容
for(var i=0;i<where.length;i++){
  if(where[i][0] == value){
   city.length = 0;    //将城市下拉菜单内容清空
   var cityArr = where[i][1].split('|');
   //切割城市数据为数组
   city[0] = new Option(where[0][1],where[0][1]);
   //设置第一项
   for(var k=1;k<cityArr.length;k++){
    //将城市的数据追加到城市菜单中
    city[k] = new Option(cityArr[k],cityArr[k]);
   }
   break;
  }
}
if(where[0][0]!= value){
msg[0] = value;
}else{
  msg[0] = '';
} //设置省份
msg[1] = ''; //设置城市数据为空，主要是为了清空上一次选择的城市
result.innerHTML = msg[0] + ' ' + msg[1];
//显示用户的选择
}
function selectCity(){
var city = document.getElementById('city');
//获得省份菜单对象
var result = document.getElementById('result');
//获得城市菜单对象
if(where[0][1]!=city.value){
msg[1] = city.value;
}else{
  msg[1] = '';
} result.innerHTML = msg[0] + ' ' + msg[1];
//显示用户的选择
}
</script>
</head>

<body οnlοad="init()">
<table border="1" align="center">
<caption>省份城市二级联动菜单</caption>
<tr>
<td>
省份/直辖市:
</td>
<td width="300">
<select id="province" οnchange="selectProvince()"></select>
</td>
</tr>
<tr>
<td>
城市：
</td>
<td width="300">
<select id="city" name="city" οnchange="selectCity()"></select>
</td>
</tr>
<tr><td>
你选择的是:
</td><td>
<span id="result"></span>
</td></tr></table>
</body>
</html>

rebornsgundam

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二级联动菜单实例（菜鸟级）

写了个最简单的实现省份和相应城市的联动菜单，开发思路：首先在页面上定义两个下拉菜单的标签，一个用于省份，另一个用于城市；然后，将省份和城市的数据用Javascript的二维数组进行保存，这样就可以将不同省份的城市区分出来；其次，初始化两个下拉菜单，填充第一个省份和相应城市的数据；最后，对两个下拉菜单监听onchange事件，并完成事件发生后的函数，动态地修改城市下拉菜单的内容和用户选择后的结果。
复制链接

扫一扫