二级联动的代码

来源：互联网发布：荣新it培训编辑：程序博客网时间：2024/05/14 23:17

<!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>

0 0