三级联动数据库添加html,前端jQuery最新省市区三级联动插件，包含sql数据库

2024-06-04 19:40:04

一、目录结构

二、功能演示

1)用浏览器打开，index.html

2)单击，输入框，

3)选择省份

4).选择城市

5).选择区县

6).显示已选中的名称和ID

三、前端页面html>

地区数据

$(function () {

//加载省市区控件

$("#city").click(function(e) {

SelCity(this, e);

});

//定时器获取已选中数据

var timeout = setInterval(function(){

var $cityId = $("#city").attr('data-id');

var $cityName = $("#city").attr('data-name');

$cityId = $cityId.split("-");

$cityName = $cityName.split("-");

if($cityId != null && $cityName != null && $cityId.length > 0 && $cityId.length == $cityName.length){

$("#districtName").html('');

$("#districtCode").html('');

var size = $cityId.length;

for (var index = 0; index

if(index == 0){

$("#provinceName").html($cityName[index]);

$("#provinceCode").html($cityId[index]);

}else if(index == 1){

$("#cityName").html($cityName[index]);

$("#cityCode").html($cityId[index]);

}else if(index == 2){

$("#districtName").html($cityName[index]);

$("#districtCode").html($cityId[index]);

}

}

}

},1000);

});

所在地区

北京市-朝阳区

省份名称：省份ID：

城市名称：城市ID：

区县名称：区县ID：

地区数据var province =[{"city":[{"name":"东城区","id":110101},{"name":"西城区","id":110102}.....];

var area =[{"name":"长安区","pid":130100,"id":130102},{"name":"桥西区","pid":130100,"id":130104}.....];

吐槽一下：百度搜省市区联动插件，各种坑爹。什么3个select 框， 3个ajax 查询，又麻烦又不好看又不好用。后来忍不了，优改了一下人家的控件，再去官网下载最新的地区数据。

谢谢大家观看~

三级联动数据库添加html,前端jQuery最新省市区三级联动插件，包含sql数据库相关推荐

jquery实现省市区三级联动
jquery实现省市区三级联动最近项目需要用到关于省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例,却很难找到详细的省.市.区的具体数据(其实,用baidu搜索就是 ...
azure云数据库_从Azure Databricks将数据加载到Azure SQL数据库
azure云数据库 In this article, we will learn how we can load data into Azure SQL Database from Azure Dat ...
后端处理数据保存请求流程multer+ajax 数据库添加数据前端与后端的数据联通在business_list 页面进行数据处理 @stage3---week3--day4
后端处理基础流程 $ npx be_app -e 快速构建项目骨架 $ yarn 安装依赖包修改 package.json {"name": "be-app" ...
数据库本地的sa有个叉号_搞定sql数据库出错，做自己的大神！
原标题:搞定sql数据库出错,做自己的大神! 怎么办? ERP出现登录不了,异常提示:数据库服务未开启或连接失败等,但实际上服务是开启的,软件安装目录下测试连接加密狗数据库也正常.最后发现sql数据库 ...
jquery xml 省市区三级联动
html部分 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
地区json文件_【小例子】使用jQuery实现省市区三级联动显示，附源码json文件
开发工具-intellij IDEA 需求 1.实现对json文件的读取. 2.可以在省级选择所有省名和直辖市名 3.选择一级省名后自动刷新市名 4.选择二级市名后自动刷新区名逻辑分析第一步:读取 ...
java封装省市区三级json格式,微信开发使用picker封装省市区三级联动模板
目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用.目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来 ...
前端jQuery的全屏滚动插件（使用方法）
全屏滚动:无滚动条,一个屏幕一个屏幕的滚动 gitHub: GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Cre ...
一台电脑能运行两个mysql数据库_一台电脑可以同时装两个带有SQL数据库的软件吗...
展开全部可以的,但是前提是必须不同版本e69da5e6ba903231313335323631343130323136353331333431356565的软件,如果是相同版本的肯定是不行的 SQL ...

最新文章

热门文章