Jquery省市区/县三级联动代码,以及引用area.js插件

2 篇文章 0 订阅
1 篇文章 0 订阅

首先jsp代码

<input type="hidden" id="provinceId" name="provinceId" value="${province}"/>
<input type="hidden" id="cityId" name="cityId" value="${city }"/>

<table>
<tr>

<td style="text-align:center;font-weight:bold;width:90px;">选择区域:</td>
<td width="13%">
<select class="select" id="province" name="province" size="1.5"}" οnchange="gett_shi()"></select></td>
        <td width="13%"><select class="select" id="ul_shi" name="city" size="1.5" οnchange="gett_qu()"></select></td>
         
<td width="13%"><select class="select" id="ul_qu" name="region" size="1.5"></select></td>

</tr>
</table>

<!-- 引用area.js文件,下载链接  http://download.csdn.net/detail/cherry5230/9413383   -->

<script src="/static/js/area.js" type="text/javascript"></script> 

编写脚本代码

<script type="text/javascript">

function get_sheng() {
var sheng = province;          
var shengString = "";
 for (var i = -1; i <sheng.length; i++){
   if(i==-1){
    shengString += "<option id='sheng"+i+"' value='000000' οnclick='get_shi(000000)' >" +"全国"+ "</option>";
   }else{
    var varCity = sheng[i];
if(varCity.id=='${province}'){
shengString += "<option selected id='sheng"+i+"' value='"+varCity.id+"'οnclick='get_shi("+varCity.id+")' >" + varCity.name + "</option>";
}else{
shengString += "<option id='sheng"+i+"' value='"+varCity.id+"'οnclick='get_shi("+varCity.id+")' >" + varCity.name + "</option>";
}
   }
   }
   document.getElementById("province").innerHTML = shengString;
}

function get_shi(id){
var shiString="";
var shengShiQu=city;
   for (var i = -1; i < shengShiQu.length; i++){
   if(i==-1){
    shiString += "<option selected value='000000'>" +"所有"+ "</option>"
   }else{
if (shengShiQu[i].pid == id) {
        var varShi = shengShiQu[i];
if(varShi.id=='${city}'){
            shiString += "<option selected value='"+varShi.id+"' οnclick='get_qu("+varShi.id+")'>" + varShi.name + "</option>";
}else{
shiString += "<option value='"+varShi.id+"' οnclick='get_qu("+varShi.id+")'>" +varShi.name + "</option>";
}
    }
   }
}
   document.getElementById("ul_shi").innerHTML = shiString;
}

function get_qu(id){
var quString="";
   var Qu = area;
   for (var i = -1; i < Qu.length; i++) {
   if(i==-1){
    quString += "<option selected value='000000'>" +"所有"+ "</option>"
   }else{
    if (Qu[i].pid == id) {
        var varQu = Qu[i];
if(varQu.id=='${region}'){
            quString += "<option selected value='"+varQu.id+"'>" + varQu.name + "</option>";
}else{
quString += "<option value='"+varQu.id+"'>" + varQu.name + "</option>";
}
    }
   }
}
   document.getElementById("ul_qu").innerHTML = quString;
}


get_sheng();
get_shi(document.getElementById("provinceId").value!=""?document.getElementById("provinceId").value:000000);
get_qu(document.getElementById("cityId").value!=""?document.getElementById("cityId").value:000000);


function gett_shi(){
var sheng = $('#province option:selected').val();
get_shi(sheng);
};

function gett_qu(){
var qu = $('#ul_shi option:selected').val();
get_qu(qu);
}

</script> 




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值