本文介绍了一个简单的JavaScript程序，用于实现网页上的省市区三级联动效果。通过两个预定义数组存储省份和对应城市的名称，当用户选择省份时，相应城市会自动更新。此示例适用于前端开发人员学习和参考。
<!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>
var province=["北京","河北"];
var city=[["朝阳","海淀","东城","西城"],["石家庄","沧州","唐山","廊坊"]];
function getCity(){
var sltProvince=document.getElementById("province");
var sltCity=document.getElementById("city");
var provinceCity=city[sltProvince.selectedIndex-1];
sltCity.length=1;
for(var i=0;i<provinceCity.length;i++){
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
}
}
//这里就是取当前被选中的下拉框的值。
function showInfo(){
var sltProvince=document.getElementById("province");
var sltCity=document.getElementById("city");
document.getElementById("cityValue").innerHTML=sltCity.value;
document.getElementById("pro").innerHTML=sltProvince.value;
for(var i=0;i<sltCity.length;i++){
if(sltCity.options[i].selected)
document.getElementById("cityValue").innerHTML=sltCity.options[i].value;
}
for(var i=0;i<sltProvince.length;i++){
if(sltProvince.options[i].selected)
document.getElementById("pro").innerHTML=sltProvince.options[i].value;
}
}
</script>
</head>
<BODY>
<form action="#" name="theForm">
<select name="province" id="province" onchange="getCity()">
<option value="0" selected>请选择所在省份</option>
</select>
<select id="city" name="city">
<option value="0">请选择所在城市</option>
</select>
<input type="button" value="button" onclick="showInfo();"/>
</form>
<div id="showvalue">
省份：<span id="pro"> </span> 城市 ： <span id="cityValue"> </span>
</div>
<script type="text/javascript">
for(var i=0;i<province.length;i++)
{
document.getElementById("province")[i+1]=new Option(province[i],province[i]);
}
</script>
</body>
</html>
扫一扫
1071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
