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

时间:2025-03-21 09:19:21

首先jsp代码

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

<table>
<tr>

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

</tr>
</table>

<!-- 引用文件,下载链接  /detail/cherry5230/9413383   -->

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

编写脚本代码

<script type="text/javascript">

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

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

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


get_sheng();
get_shi(("provinceId").value!=""?("provinceId").value:000000);
get_qu(("cityId").value!=""?("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>