日期:2014-05-16  浏览次数:20735 次

JQuery Ajax三级联动地区下拉框

JSP部分代码

?

<script src="/js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script>
?//为了避免jquery中的'$'与其它的'$'冲突,在此将jquery中的'$'重命名为'jQuery'
?var jQuery=$;
</script>

?

<script>
??//初始化数据
??jQuery(document).ready(function(){
???getProvince();

?});
??
? //取所有省份
? function getProvince(){

???//&callback=?"注意这个是为了解决跨域访问的问题???
???var url ="<%=request.getContextPath() %>/getAreaJSON?areaId=0&callback=?";
? ?
? ?jQuery.getJSON(url,null,function call(result){??
???????? setProvince(result);?
???? });
? ?
? ?//显示或隐藏激活卡
? ?jQuery("#actionCardChk").click(function(){
?? ?if(jQuery("#actionCardChk").attr("checked")==true){
?? ??jQuery("#actionCardDiv").show();
?? ?}else{
?? ??jQuery("#actionCardDiv").hide();
?? ?}
? ?});
? ?
? ?//显示或隐藏新增常用地址
? ?jQuery("#addressChk").click(function(){
?? ?if(jQuery("#addressChk").attr("checked")==true){
?? ??jQuery("#addressDiv").show();
?? ?}else{
?? ??jQuery("#addressDiv").hide();
?? ?}
? ?});

?}
??
? //设置省份
? function setProvince(result){
??
??var province = document.getElementById("toProvince");
??
??jQuery.each(result.data, function(i, area){
???????? var value = area.id;
? ??var text = area.name;
? ??var option = new Option(text,value);
? ??province.options.add(option);
?????????
??? });??
? }
??
? //按上级ID取子地区
? function getArea(name){
? ?
? ?if( name=='city' ){
? ??clearSel(document.getElementById("toCity"));?//清空城市
? ??var province = document.getElementById("toProvince");
? ??if(province.options[province.selectedIndex].value == "") return;
? ??var areaId = province.options[province.selectedIndex].value;
? ??
? ??var url ="<%=request.getContextPath() %>/getAreaJSON?areaId="+areaId+"&callback=?";
? ??jQuery.getJSON(url,null,function call(result){??
???????? ?setCity(result);?
???? ?});
????
? ?}else if( name=='county'){
? ??clearSel(document.getElementById("toCounty"));?//清空城区
? ??var city = document.getElementById("toCity");
? ??if(city.options[city.selectedIndex].value == "") return;
? ??var areaId = city.options[city.selectedIndex].value;
? ??
? ??var url ="<%=request.getContextPath() %>/getAreaJSON?areaId="+areaId+"&callback=?";
? ??jQuery.getJSON(url,null,function call(result){??
???????? ?setCounty(result);?
???? ?});
???? ?
? ?}
? }
?
? //当改变省份时设置城市
? function setCity(result){
??
??var city = document.getElementById("toCity");
??
??jQuery.each(result.data, function(i, area){
???????? var value = area.id;
? ??var text = area.name;
? ??var option = new Option(text,value);
? ??city.options.add(option);
??? });?
???
? }
??
? //当改变省份时设置城市
? function setCounty(result){
?
??var county = document.getElementById("toCounty");
??
??jQuery.each(result.data, function(i, area){
???????? var value = area.id;
? ??var text = area.name;
? ??var option = new Option(text,value);
? ??county.options.add(option);
??? });?
? ?
? }
?
? // 清空下拉列表
? function clearSel(oSelect){
?????
??while(oSelect.childNodes.length>0){
???oSelect.removeChild(oSelect.childNodes[0]);
??}
????????
? }

?

</script>

<