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

本文介绍了一个基于HTML和JavaScript实现的地区选择器。该选择器包括省份、城市和区县三级联动,通过引用area.js文件来获取地区数据,并利用JavaScript动态生成下拉选项。此外,还实现了根据已选省份自动填充城市和区县的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先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"}" onchange="gett_shi()"></select></td>
        <td width="13%"><select class="select" id="ul_shi" name="city" size="1.5" onchange="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.youkuaiyun.com/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' onclick='get_shi(000000)' >" +"全国"+ "</option>";
   }else{
    var varCity = sheng[i];
if(varCity.id=='${province}'){
shengString += "<option selected id='sheng"+i+"' value='"+varCity.id+"'onclick='get_shi("+varCity.id+")' >" + varCity.name + "</option>";
}else{
shengString += "<option id='sheng"+i+"' value='"+varCity.id+"'onclick='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+"' onclick='get_qu("+varShi.id+")'>" + varShi.name + "</option>";
}else{
shiString += "<option value='"+varShi.id+"' onclick='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> 




地区码area.js大全 代码示例: var dsy = new Dsy(); dsy.add("0",["北京市","天津市","上海市","重庆市","河北省","山西省","内蒙古","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","广西","海南省","四川省","贵州省","云南省","西藏","陕西省","甘肃省","青海省","宁夏","新疆","香港","澳门","台湾省"]); dsy.add("0_0_0",["东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区","海淀区","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云","延庆","延庆镇"]); dsy.add("0_0",["北京市"]); dsy.add("0_1_0",["和平区","河东区","河西区","南开区","河北区","红桥区","塘沽区","汉沽区","大港区","东丽区","西青区","津南区","北辰区","武清区","宝坻区","蓟","宁河","芦台镇","静海","静海镇"]); dsy.add("0_1",["天津市"]); dsy.add("0_2_0",["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","南汇区","奉贤区","崇明","城桥镇"]); dsy.add("0_2",["上海市"]); dsy.add("0_3_0",["渝中区","大渡口区","江北区","沙坪坝区","九龙坡区","南岸区","北碚区","万盛区","双桥区","渝北区","巴南区","万州区","涪陵区","黔江区","长寿区","合川市","永川区市","江津市","南川市","綦江","潼南","铜梁","大足","荣昌","璧山","垫江","武隆","丰都","城口","梁平","开","巫溪","巫山","奉节","云阳","忠","石柱土家族自治","彭水苗族土家族自治","酉阳土家族苗族自治","秀山土家族苗族自治"]); dsy.add("0_3",["重庆市"]); ...
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值