城市三级联动选项卡完美整理
时间：2014-02-19 发布人：SHX 浏览次数：4550 评论：0
用Jquery实现，原始代码只支持IE，这里我改了一下，我的代码里面有三个版本的实现
第一个是通过读取XML构建，支持IE/firefox，chrome不支持，有兴趣的可以将读取XML的部分改成AJAX的方式，这样chrome支持就不成问题
第二个是采用Json数据格式构建，是我的第二次尝试改进
第三个与第二个其实是一样的，只不过将数据分离到JS文件中，我的代码中有一个ASP文件，是调用数据库生成Json省市区数据的，如果页面直接调用ASP文件，速度会很慢，生成JS文件后直接调用就要快的多，而且这部分数据一般不会改动
下面是部分案例代码
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="areadata.js"></script>
<script type="text/javascript">
$(function(){
var $s1=$("#Select1");
var $s2=$("#Select2");
var $s3=$("#Select3");
// var v1=null;
// var v2=null;
// var v3=null;
var v1="01";
var v2="0102";
var v3="010202";
$.each(threeSelectData,function(k,v){
appendOptionTo($s1,k,v.val,v1);
});
$s1.change(function(){
$s2.html("");
$s3.html("");
if(this.selectedIndex==-1) return;
var s1_curr_val = this.options[this.selectedIndex].value;
$.each(threeSelectData,function(k,v){
if(s1_curr_val==v.val){
if(v.items){
$.each(v.items,function(k,v){
appendOptionTo($s2,k,v.val,v2);
});
}
}
});
if($s2[0].options.length==0){appendOptionTo($s2,"...","",v2);}
$s2.change();
}).change();
$s2.change(function(){
$s3.html("");
var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
if(this.selectedIndex==-1) return;
var s2_curr_val = this.options[this.selectedIndex].value;
$.each(threeSelectData,function(k,v){
if(s1_curr_val==v.val){
if(v.items){
$.each(v.items,function(k,v){
if(s2_curr_val==v.val){
$.each(v.items,function(k,v){
appendOptionTo($s3,k,v,v3);
});
}
});
if($s3[0].options.length==0){appendOptionTo($s3,"...","",v3);}
}
}
});
}).change();
function appendOptionTo($o,k,v,d){
var $opt=$("<option>").text(k).val(v);
if(v==d){$opt.attr("selected", "selected")}
$opt.appendTo($o);
}
});
</script>
<style type="text/css" media="screen">
select{width:80px;}
</style>
<select id="Select1" name="Select1"></select>
<select id="Select2" name="Select2"></select>
<select id="Select3" name="Select3"></select><script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="areadata.js"></script>
<script type="text/javascript">
/*
通用三级联动说明
参数配置如下，配置select的三个ID和默认值就行，无默认值填写为null
var defaults = {
s1:'Select1',
s2:'Select2',
s3:'Select3',
v1:null,
v2:null,
v3:null
};
*/
var defaults = {
s1:'Select1',
s2:'Select2',
s3:'Select3',
v1:120000,
v2:120200,
v3:120224
};
$(function(){
threeSelect(defaults);
});
function threeSelect(config){
var $s1=$("#"+config.s1);
var $s2=$("#"+config.s2);
var $s3=$("#"+config.s3);
var v1=config.v1?config.v1:null;
var v2=config.v2?config.v2:null;
var v3=config.v3?config.v3:null;
$.each(threeSelectData,function(k,v){
appendOptionTo($s1,k,v.val,v1);
});
$s1.change(function(){
$s2.html("");
$s3.html("");
if(this.selectedIndex==-1) return;
var s1_curr_val = this.options[this.selectedIndex].value;
$.each(threeSelectData,function(k,v){
if(s1_curr_val==v.val){
if(v.items){
$.each(v.items,function(k,v){
appendOptionTo($s2,k,v.val,v2);
});
}
}
});
if($s2[0].options.length==0){appendOptionTo($s2,"...","",v2);}
$s2.change();
}).change();
$s2.change(function(){
$s3.html("");
var s1_curr_val = $s1[0].options[$s1[0].selectedIndex].value;
if(this.selectedIndex==-1) return;
var s2_curr_val = this.options[this.selectedIndex].value;
$.each(threeSelectData,function(k,v){
if(s1_curr_val==v.val){
if(v.items){
$.each(v.items,function(k,v){
if(s2_curr_val==v.val){
$.each(v.items,function(k,v){
appendOptionTo($s3,k,v,v3);
});
}
});
if($s3[0].options.length==0){appendOptionTo($s3,"...","",v3);}
}
}
});
}).change();
function appendOptionTo($o,k,v,d){
var $opt=$("<option>").text(k).val(v);
if(v==d){$opt.attr("selected", "selected")}
$opt.appendTo($o);
}
}
</script>
<style type="text/css" media="screen">
select{width:80px;}
</style>
<select id="Select1" name="Select1"></select>
<select id="Select2" name="Select2"></select>
<select id="Select3" name="Select3"></select>
上一篇：PHP过滤前端输入的非法内容下一篇：获取免费CMCC,chinanet的方法
