复制代码 代码如下:
<!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>
省市,联动菜单
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
更新日志
- 好薇2024《兵哥哥》1：124K黄金母盘[WAV+CUE]
- 胡歌.2006-珍惜（EP）【步升大风】【FLAC分轨】
- 洪荣宏.2014-拼乎自己看【华特】【WAV+CUE】
- 伊能静.1999-从脆弱到勇敢1987-1996精选2CD【华纳】【WAV+CUE】
- 刘亮鹭《汽车DJ玩主》[WAV+CUE][1.1G]
- 张杰《最接近天堂的地方》天娱传媒[WAV+CUE][1.1G]
- 群星《2022年度发烧天碟》无损黑胶碟 2CD[WAV+CUE][1.4G]
- 罗文1983-罗文甄妮-射雕英雄传(纯银AMCD)[WAV+CUE]
- 群星《亚洲故事香港纯弦》雨果UPMAGCD2024[低速原抓WAV+CUE]
- 群星《经典咏流传》限量1：1母盘直刻[低速原抓WAV+CUE]
- 庾澄庆1993《老实情歌》福茂唱片[WAV+CUE][1G]
- 许巍《在别处》美卡首版[WAV+CUE][1G]
- 林子祥《单手拍掌》华纳香港版[WAV+CUE][1G]
- 郑秀文.1997-我们的主题曲【华纳】【WAV+CUE】
- 群星.2001-生命因爱动听电影原创音乐AVCD【MEDIA】【WAV+CUE】