`

省城市地区选择

阅读更多

//<tr>
//    <td align="right">
//        <label>省份:</label>
//    </td>
//    <td>
//        <select name="owner.provId" id="provIdSelect" onchange="province_change(this.value)">
//            <option value="">-请选择-</option>
//            <option value="100">北京</option>
//            <option value="200">江苏省</option>
//            <option value="300">浙江省</option>
//            <option value="400">广东省</option>
//        </select>
//        <input type="hidden" value="" maxlength="80" id="_provIddefault">
//            <i>
//                <font color="red">*</font>
//            </i>
//        </td>
//    </tr>
//    <tr>
//        <td align="right">
//            <label>城市:</label>
//        </td>
//        <td>
//            <select class="valid" name="owner.cityId" id="cityIdSelect" onchange="city_change(this.value)">
//                <option value="">-请选择-</option>
//            </select>
//            <input type="hidden" value="" maxlength="80" id="_cityIddefault">
//                <i>
//                    <font color="red">*</font>
//                </i>
//            </td>
//        </tr>
//        <tr>
//            <td align="right">
//                <label>区:</label>
//            </td>
//            <td>
//                <select class="valid" name="owner.areaId" id="areaIdSelect">
//                    <option value="">-请选择-</option>
//                </select>
//                <input type="hidden" value="" maxlength="80" id="_areaIddefault">
//                    <i>
//                        <font color="red">*</font>
//                    </i>
//                </td>
//            </tr>
//区列表
var areaList={
"v1001":[['10011',"dd1",true],['10012',"ww1"],['10013',"rr1"]],
"v1002":[['10021',"daad1",true],['10022',"waaw1"],['10023',"raar1"]],
"v2001":[["20011","鼓楼区",true],["20012","白下区"],["20013","浦口区"]],
"v2002":[["20021","锡山东区",true],["20022","锡山西区"],["20023","锡山北区"]],
"v2003":[["20031","兴化市",true],["20032","泰兴区"],["20033","大邹区"]],
"v3001":[["30011","杭州东区",true],["30012","杭州南区"],["30013","杭州西区"]],
"v3002":[["30021","嘉善区",true],["30022","主城区"],["30023","嘉兴大区"]],
"v3003":[["30031","嘉善区",true],["30032","主城区"],["30033","嘉兴大区"]],
"v4001":[["40011","海珠区",true],["40012","天河区"],["40013","番禺区"],["40014","花都区"]],
"v4002":[["40021","南山区",true],["40022","福田"],["40023","罗湖"],["40024","盐田"],["40025","宝安"],["40026","龙岗"],["40027","光明"],["40027","公明"]]
};

//市列表
var cityList={
"v100":[['1001',"北京东城区",true],['1002',"北京西城区"]],
"v200":[['2001',"南京市" ,true],['2002',"无锡市" ],['2003',"泰州市" ]],
"v300":[['3001',"杭州市" ,true],['3002',"嘉兴市" ]],
"v400":[['4001',"广州市" ,true],['4002',"深圳市" ]]
};

//省列表
var province = [{"100":"北京","200":"江苏省","300":"浙江省","400":"广东省"}] ;

function initSelect(options){
var provId = options["provId"];
var cityId = options["cityId"];
var areaId = options["areaId"];
provinceInit(provId);
cityInit(provId,cityId);
areaInit(provId,cityId,areaId);
}

//初始化省
function provinceInit(provId){
var provElement = document.getElementById("provIdSelect");
for (var j in province){
for (var key in province[j]){
option = new Option(province[j][key],key);
option.selected = (provId == key);
provElement.add(option);
}
}
}

//初始化市
function cityInit(provId,cityId){
var cityElement = document.getElementById("cityIdSelect");
var options = cityList["v"+provId] || {} ;
for(var j in options){
option = new Option(options[j][1],options[j][0]);
option.selected = (cityId == options[j][0]);
cityElement.add(option);
}
}

//初始化区
function areaInit(provId,cityId,areaId){
var areaElement = document.getElementById("areaIdSelect");
var cityoptions = cityList["v"+provId] || {} ;

for(var j in cityoptions){
if(cityoptions[j][0] == cityId ){
var options = areaList["v"+cityId] || {} ;
for(var j in options){
option = new Option(options[j][1],options[j][0]);
option.selected = (areaId == options[j][0]);
areaElement.add(option);
}
}
}
}

//组装province
function assembleProvinceOptions(){

for (var j in province){
for (var key in province[j]){
option = new Option(province[j][key],key);
option.selected = (provId == key);
provElement.add(option);
}
}
}

//选择省事件
function province_change(v){
var cityElement = document.getElementById("cityIdSelect");
cityElement.innerHTML = "";
if(v!=""){
var citys = cityList["v"+v];
for (var i=0; i<citys.length; i++)
{
option = new Option(citys[i][1],citys[i][0]);
if(citys[i].length==3&&citys[i][3]==true){
option.selected = true;
}
cityElement.add(option);
}
} else {
option = new Option("-请选择-","");
cityElement.add(option);
}

city_change(cityElement.value);
}

//选择市事件
function city_change(v){
window.console.log(v);
var areaElement = document.getElementById("areaIdSelect");
areaElement.innerHTML = "";
if(v!=""){
var areas = areaList["v"+v];
for (var i=0 ;i<areas.length; i++){
option = new Option(areas[i][1],areas[i][0]);
if(areas[i].length==3&&areas[i][3]==true){
option.selected = true;
}
areaElement.add(option);
}
} else {
option = new Option("-请选择-","");
areaElement.add(option);
}

}


分享到:
评论

相关推荐

    城市选择器 地区选择器

    城市选择器和地区选择器通常包含省、市、区三级或多级联动下拉框。用户选择上一级别时,下一级别的选项会根据前者的选取动态加载,这涉及到了数据的异步加载和DOM的动态更新。在JavaScript和jQuery中,我们可以使用...

    模仿京东城市地区选择

    在构建一个类似京东城市地区选择的页面时,我们主要涉及到前端技术中的动态交互与数据管理。这个项目的核心是实现Tab页面间的联动选择,也就是当用户在某个Tab选择了一个城市或地区后,其他关联的Tab会根据这个选择...

    jQuery 城市地区选择菜单(省、市、县)

    本主题将深入探讨如何使用jQuery来创建一个动态的城市地区选择菜单,包括省、市、县三级联动的功能,并具备设置初始值的能力。 首先,我们需要理解这个功能的基本原理。城市地区选择菜单通常由三个下拉列表组成,...

    ios-城市选择列表(三级选择列表,可选地区).zip

    在这个特定的场景中,"ios-城市选择列表(三级选择列表,可选地区).zip" 提供了一个实现三级选择的城市列表,即省级、市级和区级的选择。这种功能常见于需要用户输入其所在地理位置的应用中,如配送服务、约会应用或者...

    仿京东城市地区选择器3级联动菜单

    【标题】"仿京东城市地区选择器3级联动菜单"是一种常见的前端开发组件,它用于在网站上实现类似京东电商平台的三级地区选择功能。在电商网站中,这种选择器允许用户按照省、市、区/县的顺序选择收货地址,以确保货物...

    uniapp地区选择器

    《uniapp地区选择器详解与应用实践》 在移动应用开发领域,uni-app作为一个跨平台的框架,已经逐渐成为开发者们的热门选择。它基于Vue.js,可以方便地编写一次代码,运行在iOS、Android、H5等多个平台上。而uniapp...

    移动前端H5城市选择控件

    移动前端H5城市选择控件的核心在于构建一个层次化的数据结构,即省-市-区/县的三级联动选择。用户在选择时,先选择省份,然后根据所选省份加载对应的市级选项,最后再根据市来显示相应的区或县级选项。这种设计可以...

    boostrap 城市选择器

    4. **多选模式**:可配置为多选模式,允许用户同时选择多个城市或地区。 5. **响应式设计**:遵循Bootstrap的设计规范,自动适应不同设备和屏幕尺寸,确保在移动设备上的良好显示。 **实现原理** Bootstrap城市...

    省市级城市选择

    在IT行业中,尤其是在开发涉及地域信息的系统时,"省市级城市选择"是一个常见的功能需求。这个功能允许用户从一个下拉列表或者选择框中选取省份,然后根据所选省份动态加载对应的市,接着根据市再加载对应的县或区。...

    省、市、地区联动选择JS封装类

    在网页开发中,省、市、地区联动选择是一种常见的交互设计,主要用于...通过理解和运用这些知识点,开发者可以轻松地将这个"省、市、地区联动选择JS封装类"集成到自己的项目中,实现高效且用户体验良好的地区选择功能。

    Android开发城市选择地区demo

    这个"Android开发城市选择地区demo"就是这样一个示例,它提供了完整的源代码,可以帮助开发者快速集成到自己的项目中。下面我们将详细探讨这个示例中的关键知识点。 1. **省份数据获取与存储**: - 在Android应用...

    Android 地区选择器,简洁集成,节省资源

    在Android应用开发中,地区选择器是一个常见的组件,用于让用户选择他们的城市或所在区域。"Android 地区选择器,简洁集成,节省资源"的标题表明这是一个专为开发者设计的解决方案,旨在简化集成过程,同时优化性能...

    swift-SDCityPickerView城市选择器包含子级别全部地区的选择

    总之,Swift-SDCityPickerView是一个强大且灵活的城市选择组件,它简化了iOS应用中涉及多级地区选择的复杂性,提高了用户体验。通过深入理解和恰当使用这个库,开发者能够轻松地为自己的应用添加这一功能,提高产品...

    HTML网页 jQuery移动端 省市区三级联动 城市选择插件

    至于省市区三级联动,这是一种常见的地区选择方式,通常包括省份、城市和区县三个层级。当用户在任一层级做出选择时,下一级别的选择框会自动填充与当前选择对应的选项。例如,当用户选择了一个省份后,城市列表会只...

    省、市、地区联动选择

    省、市、地区联动选择JS封装类)改造成默认第一项都是请选择,比如选择省份后加载出来默认第一项为请选择城市,选择城市后默认加载出来第一项为请选择地区 这样可以每次选择列表都有包含个默认请选择的项。 示例:...

    HTML5手机端三级联动城市选择代码

    HTML5手机端三级联动城市选择代码是...总的来说,HTML5手机端三级联动城市选择代码是结合了HTML5、JavaScript(包括AJAX、DOM操作和事件处理)、以及可能的前端框架技术的产物,它为移动用户提供了便捷的地区选择体验。

    jQuery弹出式下拉框省市区三级联动地区选择插件

    "jQuery弹出式下拉框省市区三级联动地区选择插件"就是为了满足这一需求而设计的。这个插件利用jQuery库的强大功能,实现了省市区三级联动的效果,即用户在选择省份后,下拉框会自动更新出对应省份的城市列表,进一步...

    河南省城市竞争力的定量分析研究

    河南省城市竞争力的定量分析研究着重于河南省18个城市的竞争力水平,通过建立评价体系,采用主成份分析和聚类分析方法进行评估,最终得出各城市的竞争力得分和分类。该研究使用了SPSS19.0软件工具,基于17项具体指标...

    Android 仿京东地址地区选择器 支持三级县城四级乡镇选择

    这个"Android 仿京东地址地区选择器"项目提供了一个高效且完整的解决方案,旨在帮助开发者快速实现类似京东的三级(省、市、县)到四级(省、市、县、乡镇)的地区选择功能。 首先,我们要理解这个项目的核心特性。...

    省、市、地区联动选择实用脚本

    标题 "省、市、地区联动选择实用脚本" 暗示了这是一个关于前端开发的脚本,主要用于实现用户在网页上选择省份时,自动更新并显示对应的市和地区的下拉菜单。这种功能常见于需要收集用户地址信息的网页表单中。下面将...

Global site tag (gtag.js) - Google Analytics