<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级联动下拉框</title>
<!--引入jquery的js库-->
<script src="js/jquery-1.4.2.js"></script>
<script>
var data = {
"北京市": ["海淀区","朝阳区","丰台区"],
"河北省": ["石家庄","唐山","秦皇岛"],
"辽宁省": ["沈阳","大连","鞍山"],
"山东省": ["青岛","济南","烟台"]
}
/* --通过jQuery实现二级联动下拉框 -- */
function selectCity(thisobj){
//获取省份
var prov=$(thisobj).val()
//获取城市
var cities=data[prov]
//清空之前的数据
$("#city").html("<option>--选择城市--</option>")
//将城市填充到第二个下拉框中
for(var i=0;i<cities.length;i++){
$("#city").append("<option>"+cities[i]+"</option>")
}
}
</script>
</head>
<body>
<select name="country" οnchange="getCountry()" >
<option value="none">--选择国家--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select>
<br><br>
<hr/>
<br>
<div id="seleDiv">
<select id="province" οnchange="selectCity(this)">
<option>--选择省市--</option>
<option>北京市</option>
<option>河北省</option>
<option>辽宁省</option>
<option>山东省</option>
</select>
<span id="citySpan">
<select id="city">
<option>--选择城市--</option>
</select>
</span>
</div>
</body>
</html>
webday04-jQuery-二级联动下拉框
最新推荐文章于 2022-03-30 18:52:06 发布