function pp() {
var s = document.getElementById("s2").value
var ah = new Array("安庆", "蚌埠", "巢湖", "池州", "滁州", "阜阳", "合肥", "淮北", "淮南", "黄山", "六安", "马鞍山", "宿州", "铜陵", "芜湖", "宣城", "亳州")
var js = new Array("常州", "淮安", "连云港", "南京", "南通", "苏州", "宿迁", "泰州", "无锡", "徐州", "盐城", "扬州", "镇江")
var sc = new Array("阿坝", "巴中", "成都", "达州", "德阳", "甘孜", "广安", "广元", "乐山", "凉山", "眉山", "绵阳", "南充", "内江", "攀枝花", "遂宁", "雅安", "宜宾", "资阳", "自贡", "泸州")
if (s == "0") {
for (var i = 0i <ah.lengthi++) {
document.getElementById("s3").options[i] = new Option(ah[i] + 1 + "日")
}
}
}
</script>
<div class="address">
<span>地址:</span>
<select id="s1">
<option>中国</option>
</select>
<select id="s2" onchange="javascript:pp()">
<option value="">省份、州</option>
<option value="0">安徽</option>
<option value="1">江苏</option>
<option value="2">四川</option>
</select>
<select id="s3">
<option>市、县</option>
</select>
</div>
页面中获取值并判断的js如下:<script type="text/javascript">
//这个函数是必须的,因为在area.js里每次更改地址时会调用此函数
function promptinfo()
{
var address = document.getElementById('address')
var s1 = document.getElementById('s1')
var s2 = document.getElementById('s2')
var town1 = document.getElementById('town1')
HTML首先在head中载入jquery库和cityselect插件。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cityselect.js"></script>
接下来,我们在#city中,放置三个select,并且三个select分别设置class属性为:prov、city、dist,分别表示省、市、区(县)三个下拉框。注意如果只想实现省市二级联动,则去掉第三个dist的select即可。
<div id="city">
<select class="prov"></select>
<select class="city" disabled="disabled"></select>
<select class="dist" disabled="disabled"></select>
</div>
jQuery
调用cityselect插件非常简单,直接调用:
$("#city").citySelect()
自定义参数调用,设置默认省市区。自定义参数调用,设置默认省市区。
$("#city").citySelect({
url:"js/city.min.js",
prov:"湖南", //省份
city:"长沙", //城市
dist:"岳麓区", //区县
nodata:"none" //当子集无数据时,隐藏select
})
当然,你还可以扩展,自定义下拉列表选项数据,你可以根据需要设置下拉内容,注意数据格式一定要为JSON格式。
$("#city").citySelect({
url:{"citylist":[
{"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},
{"n":"JAVASCIPT"}]},
{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},
{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},
]},
prov:"",
city:"",
dist:"",
nodata:"none"
})
你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式,然后使用url参数指向后台地址也能实现无刷新联动效果。
$("#city").citySelect({
url:"data.php"
})