二级联动

最新推荐文章于 2024-05-16 04:46:22 发布

lyx_lyq

最新推荐文章于 2024-05-16 04:46:22 发布

阅读量308

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/lyx_lyq/article/details/50963787

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

以省份和城市为例

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
省份： <select name="prov" id="prov">
<option>--请选择省份--</option>
</select>
城市： <select name="city" id="city">
<option>--请选择城市--</option>
</select>
<br/><br/>
当前选择的地址为：<input type="text" id="addtxt"/>
<br/><br/>
<ol>（省市二级联动）说明：
<li>当页面加载时默认添加4个省份；</li>
<li>当选择了某个省份，后面的城市下拉框中出现对应的城市;</li>
<li>选择了省份和城市后，文本框中出现选中的内容</li>
</ol>
<script>
var provs=['四川省','云南省','贵州省','广西省','广东省'];
var citys=[
['成都市','德阳市','绵阳市','广元市','遂宁市'],
['昆明市','大理市','丽江市'],
['贵阳市','遵义市'],
['南宁市','桂林市'],
['广州市','湛江市','深圳市']
];
window.οnlοad=function(){
var prov=document.getElementById("prov");
var city=document.getElementById("city");
var addtxt=document.getElementById("addtxt");
//页面加载时添加省份数据
for(i=0; i<provs.length; i++){
prov.innerHTML+="<option>"+provs[i]+"</option>";
}

//城市切换时change事件绑定
city.οnchange=function(){
if(city.selectedIndex==0){
//给文本框添加选中的省份
addtxt.value=prov.options[prov.selectedIndex].text;
}else{
addtxt.value+=city.options[city.selectedIndex].text;
}
}//省份下拉框change事件绑定
prov.οnchange=function(){
//添加新数据之前应该先去掉原本可能有的城市
city.options.length=1;
if(prov.selectedIndex==0){
//没有选中省份，那么文本框中清空内容
addtxt.value="";
}else{
//选中省份，同时添加该省份的城市数据
for(i=0; i<citys[prov.selectedIndex-1].length; i++){
city.innerHTML+="<option>"+citys[prov.selectedIndex-1][i]+"</option>";
}
//给文本框添加选中的省份
addtxt.value=prov.options[prov.selectedIndex].text;
}
}
}
</script>
</body>
</html>