这篇仅适合前端不好、后端不行的同学看。
联动--选择省份,市区的选择框就会紧跟着展示出对应省份下的市级信息。
第一步:根据编码表的数据,我们先得到省份的编码:城市名,传到前端for循环,拼接html+="<option value='编码值'>城市名</option>"。 具体获取省份,一般就是用ajax异步刷新,js初始化时,触发ajax所在的函数方法(function(){ $.ajax({...})})。
第二步:省份在页面上展示出来后,我们选择某一省份的时候,触发事件。以省份编码为参数,再走一次异步,通过省份编码获取市级别的城市信息(市级的父级编码就是省份级别的编码)。之后跟第一步一样,拼接html,在页面上展示出来。 同理,三级联动,四级联动都可以这样写。如果用到的地方比较多,这部分代码可以做一个简单的封装,当其他地方需要的时候,直接调用方法即可。下面是第二步的代码,仅供参考:
function createCities(province,city){
var province2;
if(province==undefined){
province2=$('#province').val();
}else{
province2 = province;
}
$.ajax({
url : xxxx?province="+province2,
type : "POST",
datatype : "json",
contentType : "application/json; charset=utf-8",
success:function(data){
var subData = data['T' + 10];
var html = '';
for(var i=0;i<subData.length;i++){
var tmpKey = subData[i].key.substr(1, subData[i].key.length - 1);
var tmpValue = subData[i].value;
if(tmpKey==city){
html += '<option value="' + tmpKey + '" selected="selected">' + tmpValue + '</option>';
}else{
html += '<option value="' + tmpKey + '">' + tmpValue + '</option>';
}
}
$("#city").html(html);
}
});
};
分享到:
相关推荐
在给定的"js二级和三级联动"源代码中,我们可以期待看到以下核心部分: 1. **数据结构**:可能是一个对象数组,每个对象包含多级关联的键值,如`{country: "中国", provinces: [{name: "广东", cities: ["广州", ...
在JavaScript编程中,省市二级或三级联动是一种常见的交互设计,常用于地址选择或者地区筛选等场景。这种联动效果可以通过JS动态地更新下拉菜单选项,根据用户在上级选择中的变化来展示相应的下级地区列表。下面我们...
"jQuery下拉框二级三级城市联动插件"就是这样一个工具,它允许用户通过级联的下拉菜单,便捷地选择多级地理信息。这个插件基于JavaScript库jQuery构建,具有高度的灵活性和易用性。 首先,jQuery是JavaScript的一个...
首先,"三级联动"是指在用户界面中,三个层次的数据(例如:国家-省份-城市)通过联动的方式进行展示。当用户在某一级选择一个选项时,下一级的选项会根据所选的上级选项动态更新。这种方式常用于地址选择、地区分类...
这里的“省份城市地区-三级联动”是指在用户界面中,通过选择省份、城市和区域这三个层级的数据来实现筛选或导航的功能。这个特定的例子是基于jQuery和XML技术实现的。 首先,jQuery是一个强大的JavaScript库,它...
总的来说,“全球国家,省份,城市”的三级联动数据集涉及到了数据的获取、存储、处理、展示等多个环节,涵盖了编程、数据库、网络通信、用户体验等多个IT领域的知识。理解和掌握这些知识点,对于开发出高效、用户...
这个"非常好用的城市三级联动或者分类三级联动"项目提供了一个高效且实用的解决方案,适用于那些需要在用户界面中实现多级选择功能的场景。下面将详细阐述这种联动效果的工作原理、应用场景以及如何使用uniapp进行...
HTML城市三级联动是一种常见的网页交互设计,用于在用户选择省份时自动更新市、区的下拉选项,以实现快速定位。这种技术常用于地址输入、配送范围选择等场景,为用户提供便捷的操作体验。本资源“HTML城市三级联动与...
在网页开发中,二级联动和三级联动的省市区选择菜单是一种常见的交互设计,主要用于收集用户的位置信息。这种功能通常在注册、填写地址等场景中出现,可以提高用户体验,减少输入错误。JavaScript(简称JS)是实现这...
城市三级联动是Web开发中常见的一种功能,主要用于实现地区选择,例如在填写地址、选择服务范围等场景。这种联动通常包括省(province)、市(city)和县(district)三个层级,用户在选择一个层级后,下一层级会...
三级联动是一种常见的用户界面设计,用于展示具有层次关系的数据,如国家-省份-城市。在这个场景中,"Thinkphp 城市地区三级联动(含数据表)"是一个基于Thinkphp框架实现的,用于处理城市和地区的三级联动效果的解决...
在网页设计中,"三级联动"是一种常见的交互方式,尤其在选择地理位置时,如国家-省份-城市。这个"jQuery世界城市三级联动下拉选择代码"是一个实现这种功能的示例,它允许用户通过三个相互关联的下拉列表来选择全球的...
这个功能允许用户在点击按钮后,通过遮罩层弹出一个包含省份、城市、区县的三级联动菜单,用户可以逐级选择,提高用户体验。 首先,我们要理解这个功能的工作原理。在`index.html`文件中,通常会有一个触发弹出框的...
综上所述,全球七大洲国家城市三级联动JSON数据是一种强大的工具,用于实现地理信息的动态展示和筛选,对于开发地图应用或地理位置服务至关重要。理解并正确使用这种数据格式,能够帮助开发者构建更加智能和用户友好...
本知识点将聚焦于“mysql全国城市三级联动表”这一主题,这通常涉及到省级、市级和区县级的数据结构设计,适用于构建具有地区选择功能的应用。 在MySQL数据库中,三级联动表设计的主要目的是为了实现用户在选择城市...
在Android开发中,城市三级联动是一种常见的功能,用于在用户选择城市时提供省-市-区的逐级筛选。这个功能通常用在地址输入、物流配送等场景,它需要一个高效的UI交互和数据管理机制。下面我们将深入探讨如何实现这...
在移动应用开发中,"城市三级联动"是一个常见的功能需求,尤其在涉及到用户地理位置选择时。这个功能通常指的是用户在选择城市时,首先选择省份,然后是城市,最后是区县,这三层选择构成了一种联动关系。接下来,...
在城市选择的例子中,一级城市的选择会决定二级城市的显示,二级城市的选择会影响三级城市的选项,依此类推。这种四级联动的效果为用户提供了一种方便的方式来筛选和定位他们想要的具体城市。 在Android中,实现这...
在标题"安卓三级联动省市联动多级联动相关-省份城市区的三联级.rar"中,我们可以理解为这是一个关于Android应用程序的资源包,其中包含了实现省市区三级联动功能的相关代码和资料。"省份城市区的三联级"暗示了这个...
JavaScript(简称JS)城市三级联动是一种常见的前端交互功能,常用于网页上的地址选择器,例如在填写表单时选择省份、城市和区县。这种功能的实现基于JavaScript的DOM操作和事件处理,使得用户能够在选择省份后自动...