您的位置：首页 > 其它

二级联动

2016-03-23 15:40 253 查看

以省份和城市为例

<!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.onload=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.onchange=function(){

if(city.selectedIndex==0){

//给文本框添加选中的省份

addtxt.value=prov.options[prov.selectedIndex].text;

}else{

addtxt.value+=city.options[city.selectedIndex].text;

}

}//省份下拉框change事件绑定

prov.onchange=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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航