基于外部一个省市联动js框架,实现初始化特定的地址级联
2017-08-28 20:04
429 查看
今天在项目中遇见这样一个问题,省市联动是采用网上的一个js框架,很好用,也很方便,这个省市联动最开始的样子长这样
现在实现一个更新个人地址功能,因为后台数据库是有原地址的,所以希望省市联动的三个下拉框的初始值是原地址
这里有几个问题需要解决,首先更改被选中的值。这可以通过改变selected的值为true实现,貌似,我们只需要改变省,市,区三个下拉框的被选中值就可以实现这个功能,但是,这里有个问题
这是省事联动部分代码,dsy数组里面没有全部贴出来,可以看到,初始化函数给每省,市下拉框绑定了个onchange事件函数
这个函数是change(1),change(2),这就意味着,每次联动的时候就会调用这两个函数之一,所以要实现这个功能得在每次设置选中值之后加上对应的下拉框的onchange所绑定的函数,change(1)或者change(2)
这样就能实现特定地址初始化,并能直接产生级联效果,否则单单设置被选中值,虽然能达到特定地址初始化,但确无法产生级联效果,即,省确实是江西省,但是市这个下拉框无法显示所有江西省的市区!
结尾:虽然可能大家使用的省市联动的外部js框架不同,实现这个特定地址初始化的功能原理相同,即,先设置被选中值,然后调用之前框架绑定在onchange上的函数!
现在实现一个更新个人地址功能,因为后台数据库是有原地址的,所以希望省市联动的三个下拉框的初始值是原地址
这里有几个问题需要解决,首先更改被选中的值。这可以通过改变selected的值为true实现,貌似,我们只需要改变省,市,区三个下拉框的被选中值就可以实现这个功能,但是,这里有个问题
function change(v){ var str="0"; for(i=0;i<v;i++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1)); }; var ss=document.getElementById(s[v]); with(ss){ length = 0; options[0]=new Option(opt0[v],opt0[v]); if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v){ if(dsy.Exists(str)){ ar = dsy.Items[str]; for(i=0;i<ar.length;i++){ options[length]=new Option(ar[i],ar[i]); }//end for if(v){ options[0].selected = true; } } }//end if v if(++v<s.length){change(v);} }//End with } 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",["重庆市"]); var s=["s_province","s_city","s_county"];//三个select的name var opt0 = ["省份","地级市","市、县级市"];//初始值 function _init_area(){ //初始化函数 for(i=0;i<s.length-1;i++){ document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")"); } change(0); }
这是省事联动部分代码,dsy数组里面没有全部贴出来,可以看到,初始化函数给每省,市下拉框绑定了个onchange事件函数
这个函数是change(1),change(2),这就意味着,每次联动的时候就会调用这两个函数之一,所以要实现这个功能得在每次设置选中值之后加上对应的下拉框的onchange所绑定的函数,change(1)或者change(2)
$("#s_province").val(context.eq(0).html()); change(1); $("#s_city").val(context.eq(1).html()); change(2); $("#s_county").val(context.eq(2).html());
这样就能实现特定地址初始化,并能直接产生级联效果,否则单单设置被选中值,虽然能达到特定地址初始化,但确无法产生级联效果,即,省确实是江西省,但是市这个下拉框无法显示所有江西省的市区!
结尾:虽然可能大家使用的省市联动的外部js框架不同,实现这个特定地址初始化的功能原理相同,即,先设置被选中值,然后调用之前框架绑定在onchange上的函数!
相关文章推荐
- 基于easyui 框架,通过读取json 文件实现省市区三联动的效果
- 基于JS实现省市联动效果代码分享
- 基于github 开源框架Android-PickerView-master实现省市三级联动
- 使用js实现一个地址的三级联动
- c#结合js实现无刷新省市联动菜单
- c#结合js实现无刷新省市联动菜单
- 基于innerHTML中的script广告实现代码[广告全部放在一个js里面] 原创
- js省市级联 三级联动菜单
- c#结合js实现无刷新省市联动菜单
- 简单代码实现复杂的省市联动程序-js
- js实现省市联动
- 三分钟实现一个插件平台和一个插件——基于最简单的OSGi.NET插件框架
- AJAX实现省市级联 JS
- js实现无刷新省市级联
- js 实现 省市县三级级联
- JS实现的省市二级联动的脚本
- Java.NET --一个基于Java的Microsoft.NET框架的实现
- 一个frameset框架的页面,关闭窗口调用js的实现
- c#结合js实现无刷新省市联动菜单 (转载)
- 一个JS动画框架-基于HTML5::Canvas