<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<select>
<option>选择省</option>
</select>
<select>
<option>选择市</option>
</select>
<select>
<option>选择区</option>
</select>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var select1 = $("select").eq(0);
var select2 = $("select").eq(1);
var select3 = $("select").eq(2);
function Map() {
this.item = {};
}
var map = new Map();
map.put = function(id, iarray) {
this.item[id] = iarray;
}
map.getArr = function(id) {
return this.item[id];
}
map.put("0", ["江苏", "浙江"]);
map.put("0-0", ["南京", "无锡"]);
map.put("0-1", ["杭州", "金华"]);
map.put("0-0-0", ["南京区","南京区2"]);
map.put("0-0-1", ["无锡区","无锡区2"]);
map.put("0-1-0", ["杭州区","杭州区2"]);
map.put("0-1-1", ["金华区","金华区2"]);
for(key in map.item) {
if(key.indexOf("-") == -1) {
var value = map.getArr(key);
for(var i=0;i<value.length;i++){
select1.append("<option key1='"+i+"'>" + value[i] + "</option>");
}
}
}
select1.change(function(){
var value = this.value;
if(value!="选择省"){
var key1 = $(this).find("option:selected").attr("key1");
var key2 = "0-"+key1;
var value2 = map.getArr(key2);
select2.empty();
select2.append("<option>选择市</option>")
for(var i=0;i<value2.length;i++){
var key3 = key2+"-"+i;
select2.append("<option key3='"+key3+"'>"+value2[i]+"</option>");
}
}else{
select2.empty();
select2.append("<option>选择市</option>")
select3.empty();
select3.append("<option>选择区</option>")
}
});
select2.change(function(){
var value = this.value;
if(value != "选择市"){
var key3 = $(this).find("option:selected").attr("key3");
var value3 = map.getArr(key3);
select3.empty();
select3.append("<option>选择区</option>")
for(var i=0;i<value3.length;i++){
select3.append("<option>"+value3[i]+"</option>");
}
}else{
select3.empty();
select3.append("<option>选择区</option>")
}
});
</script>
</html>
83行实现城市三级联动(有些地区自己添加)jquery
最新推荐文章于 2024-07-21 02:56:05 发布