您的位置：首页 > Web前端 > HTML

Html 简单的省市联动

2015-09-27 23:22 696 查看

这是一个基于html的简单的省市联动功能代码如下：

<html>
<head>
<title>Document</title>
</head>
<body>
<select id = "province" onchange="showCity(this.value)">
<option >--请选择--</option>
<option value ="安徽">安徽</option>
<option value ="浙江">浙江</option>
<option value="江苏">江苏</option>
<option value="湖北">湖北</option>
</select>
<select id="city">
</select>
</body>
<script type ="text/javascript">
var arr= new Array(4);
arr[0]=["安徽","合肥","芜湖","安庆","铜陵"];
arr[1]=["浙江","杭州","宁波","温州","嘉兴","湖州"];
arr[2]=["江苏","南京","苏州","无锡"];
arr[3]=["湖北","武汉","十堰","荆州"];

function showCity(value)
{
var city1 = document.getElementById("city");
var opts = city1.getElementsByTagName("option");
for (var a = 0 ;a<opts.length ;a++ )
{
var opt = opts[a];
city1.removeChild(opt);
a--;

}

for (var i = 0;i<arr.length ;i++ )
{
var arr1=arr[i];
var fristvalue = arr1[0];
if (fristvalue==value)
{
for (var j=1;j<arr1.leng
4000
th ;j++ )
{
var value1=arr1[j];
//alert(value1);
var option1 = document.createElement("option");
var text1 = document.createTextNode(value1);
option1.appendChild(text1);
city1.appendChild(option1);
}
}
}

}
</script>
</html>

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

标签： html select 省市联动

相关文章推荐

新的分享

章节导航