`
huttoncs
  • 浏览: 200905 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

(地址级联)省市两级级联(通过js实现)

阅读更多
jsp文件中代码片段如下:
<tr>
<th>单位住址</th>
<td><select  id="provinceCompany" name="provinceCompany" onchange="selectCompanyCity(this.value);" style="width:80px"></select>
     <select  id="areaCompany" name="areaCompany" style="width:100px">     </select>
         </td>
</tr>



<div style="display:none;">
          <input id="dwProvinceCompany" name="dwProvinceCompany"   value="${student.dwProvinceCompany}"/>
          <input id="dwAreaCompany" name="dwAreaCompany" value="${student.dwAreaCompany}"/>
</div>

js文件内容如下:
var city=[{name:'请选择',subCity:[{name:'请先选择省份'}]},{name:'北京',
subCity:[
{name:'请选择'},        
{name:'东城区'},
{name:'西城区'},
{name:'崇文区'},
{name:'宣武区'},
{name:'朝阳区'},
{name:'丰台区'},
{name:'石景山区'},
{name:'海淀区'},
{name:'门头沟区'},
{name:'房山区'},
{name:'通州区'},
{name:'顺义区'},
{name:'昌平区'},
{name:'大兴区'},
{name:'怀柔区'},
{name:'平谷区'},
{name:'密云区'},
{name:'延庆区'}]},

{name:'天津',
subCity:[{name:'请选择'},
{name:'和平区'},
{name:'河东区'},
{name:'河西区'},
{name:'南开区'},
{name:'河北区'},
{name:'红桥区'},
{name:'塘沽区'},
{name:'汉沽区'},
{name:'大港区'},
{name:'东丽区'},
{name:'西青区'},
{name:'津南区'},
{name:'北辰区'},
{name:'武清区'},
{name:'宝坻区'}]},

{name:'河北',
subCity:[{name:'请选择'},
{name:'石家庄市'},
{name:'唐山市'},
{name:'秦皇岛市'},
{name:'邯郸市'},
{name:'邢台市'},
{name:'保定市'},
{name:'张家口市'},
{name:'承德市'},
{name:'沧州市'},
{name:'廊坊市'},
{name:'衡水市'}]},

{name:'山西',
subCity:[{name:'请选择'},
{name:'太原市'},
{name:'大同市'},
{name:'阳泉市'},
{name:'长治市'},
{name:'晋城市'},
{name:'朔州市'},
{name:'晋中市'},
{name:'运城市'},
{name:'忻州市'},
{name:'临汾市'},
{name:'吕梁市'}]},

{name:'内蒙古',
subCity:[
{name:'请选择'},
{name:'呼和浩特市'},
{name:'包头市'},
{name:'乌海市'},
{name:'赤峰市'},
{name:'通辽市'},
{name:'鄂尔多斯市'},
{name:'呼伦贝尔市'},
{name:'巴彦淖尔市'},
{name:'乌兰察布市'},
{name:'兴安盟'},
{name:'锡林郭勒盟'},
{name:'阿拉善盟'}]},

{name:'辽宁',
subCity:[
{name:'请选择'},
{name:'沈阳市'},
{name:'大连市'},
{name:'鞍山市'},
{name:'抚顺市'},
{name:'本溪市'},
{name:'丹东市'},
{name:'锦州市'},
{name:'营口市'},
{name:'阜新市'},
{name:'辽阳市'},
{name:'盘锦市'},
{name:'铁岭市'},
{name:'朝阳市'},
{name:'葫芦岛市'}]},

{name:'吉林',
subCity:[{name:'请选择'},
{name:'长春市'},
{name:'吉林市'},
{name:'四平市'},
{name:'辽源市'},
{name:'通化市'},
{name:'白山市'},
{name:'松原市'},
{name:'白城市'},
{name:'延边朝鲜族自治州'}]},

{name:'黑龙江',
subCity:[{name:'请选择'},
{name:'哈尔滨市'},
{name:'齐齐哈尔市'},
{name:'鸡西市'},
{name:'鹤岗市'},
{name:'双鸭山市'},
{name:'大庆市'},
{name:'伊春市'},
{name:'佳木斯市'},
{name:'七台河市'},
{name:'牡丹江市'},
{name:'黑河市'},
{name:'绥化市'},
{name:'大兴安岭地区'}]},

{name:'上海',
subCity:[{name:'请选择'},
{name:'黄浦区'},
{name:'卢湾区'},
{name:'徐汇区'},
{name:'长宁区'},
{name:'静安区'},
{name:'普陀区'},
{name:'闸北区'},
{name:'虹口区'},
{name:'杨浦区'},
{name:'闵行区'},
{name:'宝山区'},
{name:'嘉定区'},
{name:'浦东新区'},
{name:'金山区'},
{name:'松江区'},
{name:'青浦区'},
{name:'南汇区'},
{name:'奉贤区'}]},

{name:'江苏',
subCity:[{name:'请选择'},
{name:'南京市'},
{name:'无锡市'},
{name:'徐州市'},
{name:'常州市'},
{name:'苏州市'},
{name:'南通市'},
{name:'连云港市'},
{name:'淮安市'},
{name:'盐城市'},
{name:'扬州市'},
{name:'镇江市'},
{name:'泰州市'},
{name:'宿迁市'}]},

{name:'浙江',
subCity:[{name:'请选择'},
{name:'杭州市'},
{name:'宁波市'},
{name:'温州市'},
{name:'嘉兴市'},
{name:'湖州市'},
{name:'绍兴市'},
{name:'金华市'},
{name:'衢州市'},
{name:'舟山市'},
{name:'台州市'},
{name:'丽水市'}]},

{name:'安徽',
subCity:[{name:'请选择'},
{name:'合肥市'},
{name:'芜湖市'},
{name:'蚌埠市'},
{name:'淮南市'},
{name:'马鞍山市'},
{name:'淮北市'},
{name:'铜陵市'},
{name:'安庆市'},
{name:'黄山市'},
{name:'滁州市'},
{name:'阜阳市'},
{name:'宿州市'},
{name:'巢湖市'},
{name:'六安市'},
{name:'亳州市'},
{name:'池州市'},
{name:'宣城市'}]},

{name:'福建',
subCity:[{name:'请选择'},
{name:'福州市'},
{name:'厦门市'},
{name:'莆田市'},
{name:'三明市'},
{name:'泉州市'},
{name:'漳州市'},
{name:'南平市'},
{name:'龙岩市'},
{name:'宁德市'}]},

{name:'江西',
subCity:[{name:'请选择'},
{name:'南昌市'},
{name:'景德镇市'},
{name:'萍乡市'},
{name:'九江市'},
{name:'新余市'},
{name:'鹰潭市'},
{name:'赣州市'},
{name:'吉安市'},
{name:'宜春市'},
{name:'抚州市'},
{name:'上饶市'}]},

{name:'山东',
subCity:[{name:'请选择'},
{name:'济南市'},
{name:'青岛市'},
{name:'淄博市'},
{name:'枣庄市'},
{name:'东营市'},
{name:'烟台市'},
{name:'潍坊市'},
{name:'济宁市'},
{name:'泰安市'},
{name:'威海市'},
{name:'日照市'},
{name:'莱芜市'},
{name:'临沂市'},
{name:'德州市'},
{name:'聊城市'},
{name:'滨州市'},
{name:'菏泽市'}]},

{name:'河南',
subCity:[{name:'请选择'},
{name:'郑州市'},
{name:'开封市'},
{name:'洛阳市'},
{name:'平顶山市'},
{name:'安阳市'},
{name:'鹤壁市'},
{name:'新乡市'},
{name:'焦作市'},
{name:'濮阳市'},
{name:'许昌市'},
{name:'漯河市'},
{name:'三门峡市'},
{name:'南阳市'},
{name:'商丘市'},
{name:'信阳市'},
{name:'周口市'},
{name:'驻马店市'},
{name:'省直辖县级行政区划'}]},

{name:'湖北',
subCity:[{name:'请选择'},
{name:'武汉市'},
{name:'黄石市'},
{name:'十堰市'},
{name:'宜昌市'},
{name:'襄樊市'},
{name:'鄂州市'},
{name:'荆门市'},
{name:'孝感市'},
{name:'荆州市'},
{name:'黄冈市'},
{name:'咸宁市'},
{name:'随州市'},
{name:'恩施土家族苗族自治州'},
{name:'省直辖县级行政区划'}]},

{name:'湖南',
subCity:[{name:'请选择'},
{name:'长沙市'},
{name:'株洲市'},
{name:'湘潭市'},
{name:'衡阳市'},
{name:'邵阳市'},
{name:'岳阳市'},
{name:'常德市'},
{name:'张家界市'},
{name:'益阳市'},
{name:'郴州市'},
{name:'永州市'},
{name:'怀化市'},
{name:'娄底市'},
{name:'湘西土家族苗族自治州'}]},

{name:'广东',
subCity:[{name:'请选择'},
{name:'广州市'},
{name:'韶关市'},
{name:'深圳市'},
{name:'珠海市'},
{name:'汕头市'},
{name:'佛山市'},
{name:'江门市'},
{name:'湛江市'},
{name:'茂名市'},
{name:'肇庆市'},
{name:'惠州市'},
{name:'梅州市'},
{name:'汕尾市'},
{name:'河源市'},
{name:'阳江市'},
{name:'清远市'},
{name:'东莞市'},
{name:'中山市'},
{name:'潮州市'},
{name:'揭阳市'},
{name:'云浮市'}]},

{name:'广西',
subCity:[{name:'请选择'},
{name:'南宁市'},
{name:'柳州市'},
{name:'桂林市'},
{name:'梧州市'},
{name:'北海市'},
{name:'防城港市'},
{name:'钦州市'},
{name:'贵港市'},
{name:'玉林市'},
{name:'百色市'},
{name:'贺州市'},
{name:'河池市'},
{name:'来宾市'},
{name:'崇左市'}]},

{name:'海南',
subCity:[{name:'请选择'},
{name:'海口市'},
{name:'三亚市'},
{name:'省直辖县级行政区划'}]},

{name:'重庆',
subCity:[{name:'请选择'},
{name:'万州区'},
{name:'涪陵区'},
{name:'渝中区'},
{name:'大渡口区'},
{name:'江北区'},
{name:'沙坪坝区'},
{name:'九龙坡区'},
{name:'南岸区'},
{name:'北碚区'},
{name:'万盛区'},
{name:'双桥区'},
{name:'渝北区'},
{name:'巴南区'},
{name:'黔江区'},
{name:'长寿区'},
{name:'江津区'},
{name:'合川区'},
{name:'永川区'},
{name:'南川区'}]},

{name:'四川',
subCity:[{name:'请选择'},
{name:'成都市'},
{name:'自贡市'},
{name:'攀枝花市'},
{name:'泸州市'},
{name:'德阳市'},
{name:'绵阳市'},
{name:'广元市'},
{name:'遂宁市'},
{name:'内江市'},
{name:'乐山市'},
{name:'南充市'},
{name:'眉山市'},
{name:'宜宾市'},
{name:'广安市'},
{name:'达州市'},
{name:'雅安市'},
{name:'巴中市'},
{name:'资阳市'},
{name:'阿坝藏族羌族自治州'},
{name:'甘孜藏族自治州'},
{name:'凉山彝族自治州'}]},

{name:'贵州',
subCity:[{name:'请选择'},
{name:'贵阳市'},
{name:'六盘水市'},
{name:'遵义市'},
{name:'安顺市'},
{name:'铜仁地区'},
{name:'黔西南布依族苗族自治州'},
{name:'毕节地区'},
{name:'黔东南苗族侗族自治州'},
{name:'黔南布依族苗族自治州'}]},

{name:'云南',
subCity:[{name:'请选择'},
{name:'昆明市'},
{name:'曲靖市'},
{name:'玉溪市'},
{name:'保山市'},
{name:'昭通市'},
{name:'丽江市'},
{name:'普洱市'},
{name:'临沧市'},
{name:'楚雄彝族自治州'},
{name:'红河哈尼族彝族自治州'},
{name:'文山壮族苗族自治州'},
{name:'西双版纳傣族自治州'},
{name:'大理白族自治州'},
{name:'德宏傣族景颇族自治州'},
{name:'怒江傈僳族自治州'},
{name:'迪庆藏族自治州'}]},

{name:'西藏',
subCity:[{name:'请选择'},
{name:'拉萨市'},
{name:'昌都地区'},
{name:'山南地区'},
{name:'日喀则地区'},
{name:'那曲地区'},
{name:'阿里地区'},
{name:'林芝地区'}]},

{name:'陕西',
subCity:[{name:'请选择'},
{name:'西安市'},
{name:'铜川市'},
{name:'宝鸡市'},
{name:'咸阳市'},
{name:'渭南市'},
{name:'延安市'},
{name:'汉中市'},
{name:'榆林市'},
{name:'安康市'},
{name:'商洛市'}]},

{name:'甘肃',
subCity:[{name:'请选择'},
{name:'兰州市'},
{name:'嘉峪关市'},
{name:'金昌市'},
{name:'白银市'},
{name:'天水市'},
{name:'武威市'},
{name:'张掖市'},
{name:'平凉市'},
{name:'酒泉市'},
{name:'庆阳市'},
{name:'定西市'},
{name:'陇南市'},
{name:'临夏回族自治州'},
{name:'甘南藏族自治州'}]},

{name:'青海',
subCity:[{name:'请选择'},
{name:'西宁市'},
{name:'海东地区'},
{name:'海北藏族自治州'},
{name:'黄南藏族自治州'},
{name:'海南藏族自治州'},
{name:'果洛藏族自治州'},
{name:'玉树藏族自治州'},
{name:'海西蒙古族藏族自治州'}]},

{name:'宁夏',
subCity:[{name:'请选择'},
{name:'银川市'},
{name:'石嘴山市'},
{name:'吴忠市'},
{name:'固原市'},
{name:'中卫市'}]},

{name:'新疆',
subCity:[{name:'请选择'},
{name:'乌鲁木齐市'},
{name:'克拉玛依市'},
{name:'吐鲁番地区'},
{name:'哈密地区'},
{name:'昌吉回族自治州'},
{name:'博尔塔拉蒙古自治州'},
{name:'巴音郭楞蒙古自治州'},
{name:'阿克苏地区'},
{name:'克孜勒苏柯尔克孜自治州'},
{name:'喀什地区'},
{name:'和田地区'},
{name:'伊犁哈萨克自治州'},
{name:'塔城地区'},
{name:'阿勒泰地区'},
{name:'自治区直辖县级行政区划'}]}];


/**选择单位地址*/
function selectCompanyCity(value){
for(var i=0;i<city.length;i++){
if(city[i].name==value){
$("#areaCompany").replaceWith("<SELECT class=sel_100 id=areaCompany name=areaCompany></SELECT>");
var cityOptions="";
for(var j=0;j<city[i].subCity.length;j++){
cityOptions += "<option value=\""+city[i].subCity[j].name+"\">"+city[i].subCity[j].name+"</option>";
}
$("#areaCompany").append(cityOptions);
break;
}
}
}

/**js初始化-省信息*/
$(function(){
  appendThree();
  });
 
 

/**单位地址初始化*/
function appendThree(){      
        var provinceValue=$("#dwProvinceCompany").val();
var areaValue=$("#dwAreaCompany").val();
var provinceOptions="";
var cityOptions="";
if(provinceValue==""){provinceValue="请选择";areaValue="请先选择省份";}
if(areaValue==""){areaValue="请选择";}
for(var i=0;i<city.length;i++){
if(provinceValue==city[i].name){
provinceOptions += "<option value=\""+city[i].name+"\" selected>"+city[i].name+"</option>";
for(var j=0;j<city[i].subCity.length;j++){
if(areaValue==city[i].subCity[j].name){
cityOptions += "<option value=\""+city[i].subCity[j].name+"\" selected>"+city[i].subCity[j].name+"</option>";
}else{
cityOptions += "<option value=\""+city[i].subCity[j].name+"\">"+city[i].subCity[j].name+"</option>";
}
}
}else{
provinceOptions += "<option value=\""+city[i].name+"\">"+city[i].name+"</option>";
}
if(provinceValue==""){
for(var j=0;j<city[i].subCity.length;j++){
cityOptions += "<option value=\""+city[i].subCity[j].name+"\">"+city[i].subCity[j].name+"</option>";
}
}
}
    $("#provinceCompany").append(provinceOptions);
$("#areaCompany").append(cityOptions);
  }
0
3
分享到:
评论

相关推荐

    js地区级联

    js 地区级联 省市两级级联 js 地区级联 省市两级级联 js 地区级联 省市两级级联 js 地区级联 省市两级级联 js 地区级联 省市两级级联 js 地区级联 省市两级级联 js 地区级联 省市两级级联

    全国地区级联数据.五级级联,省市区街道社区

    使用这些数据时,开发者需要将SQL脚本导入到MySQL数据库中,然后在前端代码(如JavaScript)中通过Ajax请求获取所需级别的数据,结合前端框架(如React、Vue或Angular)实现级联选择的效果。同时,在后端(如PHP、...

    jquery省市区三级级联

    在本案例中,我们看到一个与这个功能相关的压缩包文件,包含了一些JavaScript文件,下面将详细讲解这些文件以及如何实现三级级联。 首先,"jquery省市区三级级联"涉及到的主要技术是jQuery和JavaScript。jQuery是一...

    esayui-全国城市省市区三级级联

    描述中提到,“自己搜索整理的基于easyUI,jQuery实现的全国城市省市区三级级联选择”,意味着这个项目是开发者通过收集网络上的信息,对代码进行了整合和优化,以适应全国范围内的城市、省、区数据,并利用EasyUI和...

    js级联菜单实现全国省市下拉菜单

    下面将详细介绍如何使用JavaScript实现全国省市的二级级联下拉菜单。 首先,我们需要一个HTML结构来承载我们的菜单。在这个例子中,我们有两个`&lt;select&gt;`元素,分别代表省份和城市。省份的选项会触发城市选项的更新...

    省市三级级联

    通过深入理解`cityData.js`的数据格式,参考`readme.txt`的说明,并研究`demo1`和`demo2`的不同实现,开发者可以轻松地在自己的项目中实现一个功能完善的省市县三级级联选择器。同时,这样的实践也有助于提升对前端...

    ajax实现省市县三级级联和ajax实现登录判断账号是否被注册

    首先,我们来看“省市县三级级联”的实现。在网页设计中,级联下拉框常用于地理信息的选择,如省市县的选取。通过Ajax,我们可以动态地加载下一级的数据,用户选择上一级后,下一级的选项会根据选择自动更新。具体...

    jquery js省市 县 级联菜单

    标题中的“jquery js省市县级联菜单”是指使用jQuery JavaScript库来实现的一种交互式下拉菜单功能,这种功能常见于网站的地址选择或者区域选择场景。级联菜单意味着当用户在一个下拉菜单中选择一个选项时,它会触发...

    dwr省市区三级级联

    标题 "dwr省市区三级级联" 涉及到的是一个前端开发中的常见问题,即如何实现省市区的三级联动效果。这个标题暗示我们这是一个使用Direct Web Remoting (DWR) 技术来实现的功能,它允许JavaScript与服务器端Java代码...

    jquery简单实现级联下拉列表

    1. **引入jQuery库**:通过 `&lt;script type="text/javascript" src="()%&gt;/easyUI/jquery-1.8.0.min.js"&gt;&lt;/script&gt;` 引入了jQuery库,这是实现动态效果的基础。 2. **定义 `change()` 函数**: - 使用 `var a = $("#...

    省市二级联动

    在IT行业中,"省市二级联动"是一个常见的前端交互功能,主要应用于网页上的地址选择器,让用户在选择省份后,自动加载对应的市一级的选择项。这个功能的实现通常涉及到JavaScript、Ajax以及Json数据格式的运用。下面...

    英文版js地区国家级联

    总结来说,“英文版js地区国家级联”是一个基于JavaScript的前端解决方案,用于实现国家、地区和城市的三级联动选择功能。它依赖两个核心文件,HTML文件提供用户界面,JavaScript文件则处理数据和交互逻辑。这样的...

    省市县三级级联的xml文件和读取方法

    在IT领域,尤其是在Web开发中,常常需要处理各种数据层级结构,其中省市县三级级联是一种常见的应用场景,例如在地址选择、数据统计等场景。XML(eXtensible Markup Language)文件由于其结构清晰、易于解析,常被...

    移动端、h5省市区三级联动

    本示例提供了一款适用于这两种平台的三级联动组件,下面将详细介绍这个功能及其实现原理。 首先,"三级联动"指的是在选择地址时,用户先选择省份,接着在省份的基础上展示对应的城市选项,最后再根据城市显示出对应...

    美国州,美国城市,美国州和城市级联

    实现这种级联效果的技术方法多种多样,可以使用JavaScript库如jQuery、React或Vue.js,也可以利用服务器端语言如PHP、Python或Node.js来动态加载数据。在前端,HTML和CSS负责展示界面,而Ajax技术通常用于异步通信,...

    Ajax实现省市区三级级联(数据来自mysql数据库)

    综上所述,本篇文档介绍了一个Web开发中常见的功能实现:通过Ajax技术实现省市区三级级联选择功能。涉及了前端与后端的交互、数据格式转换、页面元素动态更新等多个方面的知识,对希望掌握Web前端开发技术的读者具有...

    jquery省市县三级级联插件

    在本项目中,我们关注的是一个特定的jQuery插件——"jquery省市县三级级联插件"。这个插件主要用于实现网页上的地区选择功能,常见于地址填写、物流配送等场景,它将中国的省、市、县(区)数据结构化,形成一种联动...

    二级联动,级联,省份城市联动

    在IT领域,二级联动是一种常见的交互设计模式,尤其在数据层级结构中,如省市区选择、商品分类等场景。这个概念通常与前端开发密切相关,涉及到HTML、CSS和JavaScript的运用。下面将详细解释二级联动的概念及其实现...

    微信小程序picker组件省市二级联动及其修改时进行回显

    省市二级联动是通过两个`picker`组件,一个选择省份,一个选择城市,当用户在省份`picker`中做出选择时,城市`picker`的范围会更新为对应省份的城市列表。以下是一个简单的实现步骤: 1. 初始化数据:设置包含所有...

    javascript实现省市区三级联动下拉框菜单

    本文将详细介绍如何使用JavaScript实现省市区三级联动下拉框菜单,实现过程中需要使用HTML构建静态页面,运用JavaScript进行动态的数据联动操作,并通过geo.js文件实现数据的调用和联动逻辑。 ### HTML页面结构 ...

Global site tag (gtag.js) - Google Analytics