Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用 jQuery 插件 CitySelect 实现省市联动效果

使用 jQuery 插件 CitySelect 实现省市联动效果

作者头像
Denis
发布于 2023-04-14 06:23:10
发布于 2023-04-14 06:23:10
2.7K00
代码可运行
举报
文章被收录于专栏:WordPress果酱WordPress果酱
运行总次数:0
代码可运行

在一些和会员相关的注册系统中,让用户输入省市信息是非常常见的行为,并且一般都是要求做到省市区联动下拉效果,今天就给大家推荐一个 jQuery 插件 CitySelect,通过 JSON 数据实现省市联动效果:

CitySelect 演示:

CitySelect 使用

首先在head中载入jquery库和cityselect插件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cityselect.js"></script>

接下来,我们在#city中,放置三个select,并且三个select分别设置class属性为:prov、city、dist,分别表示省、市、区(县)三个下拉框。注意如果只想实现省市二级联动,则去掉第三个dist的select即可。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="city">
    <select class="prov"></select>
    <select class="city" disabled="disabled"></select>
    <select class="dist" disabled="disabled"></select>
</div>

调用 cityselect 插件非常简单,直接调用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#city").citySelect();

自定义参数调用,设置默认省市区。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("#city").citySelect({
    url:"js/city.min.js",
    prov:"湖南", //省份
    city:"长沙", //城市
    dist:"岳麓区", //区县
    nodata:"none" //当子集无数据时,隐藏select
});

下载:CitySelect

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
基于jQuery+JSON的省市联动效果
省市区联动下拉效果在WEB应用中使用非常广泛,尤其在一些会员信息系统、电商网站最为常见,开发者一般使用AJAX实现无刷新下拉联动。 本文将讲述利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果。
全栈程序员站长
2021/12/23
2.9K0
jQuery 下拉查询筛选插件Combo Select
插件描述:Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式。Combo Select 能够对选项进行检索过滤,同时支持键盘控制。
用户5640963
2019/07/26
6.4K0
layui省市区三级联动插件
这个是一个layui省市区三级联动插件,近来使用layui后台模板框架开发后台系统,要用到省市县/区三级联动,本想从网上找个现成的轮子,然没有自己想要的需求,就自己造了个。
孤烟
2020/09/27
4.2K0
jQuery开发补充笔记
[TOC] 0x00 前言简介 什么JQuery? jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架
全栈工程师修炼指南
2020/10/23
4.7K0
jQuery开发补充笔记
省市二级联动
就不多说,直接上效果图和代码,该网页所需要的图片放下面了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="
天蝎座的程序媛
2022/11/18
2.2K0
省市二级联动
jQuery开发补充笔记
[TOC] 0x00 前言简介 什么JQuery? jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架
全栈工程师修炼指南
2022/09/29
1.6K0
jQuery开发补充笔记
省市区 - 三级联动通用化模块组件
都说我们要做模块化设计,而不要做功能化设计 什么是模块化设计,就是可插拔性高,组件化,想要就用,不要用拉倒,直接删除就行 什么是功能化设计,就是一个简单的功能,实现想要的效果,但是不够通用化,别人要用的话需要读懂你的代码,还需要复制黏贴很多代码这样效率不高 今天写了一个省市区三级联动的模块,写完后使用会非常方便,也很灵活 主要使用到的技术:jquery,redis,springMVC,MyBatis(springMVC和MyBatis无所谓,你用struts或者hibernate或者spring data都
风间影月
2018/04/04
2.4K0
省市区 - 三级联动通用化模块组件
javaWeb核心技术第五篇之jQuery
- 概述 - jQuery是一个优秀的javascript框架(js类库),兼容css3和各大浏览器,提供dom,events,animate,ajax等简易的操作。并且jQuery有非常丰富的插件,大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多) - jQuery入门 - jQuery和html整合 - 下载 - 下载地址:www.jquery.com - 使用script的src属性即可
海仔
2019/08/26
8.2K0
jquery 自己编写插件2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> table { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} .even { background:#FFF38F;} /* 偶数行样式/ .odd { background:#FFFFEE;} / 奇数行样式*/ .selected { background:#FF6500;color:#fff;} </style> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> //插件编写 ;(function(
用户5760343
2019/10/10
5100
jquery 自己编写插件2
form表单美化插件之jqTransform
jqTransform http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/ 下载: download 用法 1- 添加脚本包含在标题部分的网页 //required <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>
deepcc
2018/05/16
1.4K0
AJAX入门这一篇就够了
什么是Ajax Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML Ajax实际上是下面这几种技术的融合: (1)XHTML和CSS的基于标准的表示技术 (2)DOM进行动态显示和交互 (3)XML和XSLT进行数据交换和处理 (4)XMLHttpRequest进行异步数据检索 (5)Javascript将以上技术融合在一起 客户端与服务器,可以在【不必刷新整个浏览器】的情况下,与服务器进行异步通讯的技术 为什么我们需要Ajax? 在我们之前的开发,
Java3y
2018/03/15
5K0
AJAX入门这一篇就够了
Django Admin实现三级联动(省市区)
找到django源码中的change_form.html(django/contrib/admin/templates/admin/)文件,复制到app下templates目录中. 在admin中指定自定义的模板文件change_form_template = 'area.html'
菲宇
2022/12/21
2K0
Django Admin实现三级联动(省市区)
Django 分页和使用Ajax5.3
分页 Django提供了一些类实现管理数据分页,这些类位于django/core/paginator.py中 Paginator对象 Paginator(列表,int):返回分页对象,参数为列表数据,每面数据的条数 属性 count:对象总数 num_pages:页面总数 page_range:页码列表,从1开始,例如[1, 2, 3, 4] 方法 page(num):下标以1开始,如果提供的页码不存在,抛出InvalidPage异常 异常exception InvalidPage:当向page()传入一个
Lansonli
2021/10/09
3.1K0
一对一直播开发PHP源码
一对一源码在php开发中我们经常会遇到一些功能需要二级联动,二级联动就是说我们在选择一级select不同的option,下面的二级option的属性值在进行相应的变动。简言之就是两个select标签,选择第一个的时候,第二个自动带出相关联的数据。
nicai123
2019/09/29
2.4K0
地址管理之省市区三级联动菜单
地址管理之省市区三级联动菜单 三级联动表单 导入省市区的数据 下载sql语句的文件 在数据库中执行:source 文件路径即可导入 导入成功之后,在数据库中会出现三张表,分别代表省,市,区 创建实体类
爱撒谎的男孩
2018/05/25
4.2K1
什么是jQuery?
Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作
Java3y
2019/05/15
3.2K0
什么是jQuery?
v-distpicker 省市区插件的使用
v-distpicker 使用说明 下拉菜单选择省市区 第一步: 安装v-distpicker npm install v-distpicker -s 第二步: 在main.js中引入 //
用户4344670
2019/08/28
2.1K0
v-distpicker  省市区插件的使用
jQuery的使用
1.需求分析 在首页中(logo的上方)显示一个广告图片(页面加载后,间隔3秒弹出广告图片,再间隔3秒后隐藏广告图片)。【使用jQuery实现】
用户5927264
2019/07/31
8.4K0
【愚公系列】2022年01月 Django商城项目16-用户中心-地址管理之省市三联动功能实现
表结构为: id:主键 name:省市名称 parent_id:自关联主键id
愚公搬代码
2022/01/24
3310
【愚公系列】2022年01月 Django商城项目16-用户中心-地址管理之省市三联动功能实现
移动端下拉刷新、上拉加载更多 Jquery插件 dropload
a javascript implementation of pull to refresh and up to loadmore 移动端下拉刷新、上拉加载更多插件
王念博客
2019/07/25
6.1K0
相关推荐
基于jQuery+JSON的省市联动效果
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验