http://www.helloweba.com/view-blog-188.html
省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动。本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果。
基于jQuery+JSON的省市联动效果
查看演示 下载源码
HTML
首先在head中载入jquery库和cityselect插件。
<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即可。
<div id="city">
<select class="prov"></select>
<select class="city" disabled="disabled"></select>
<select class="dist" disabled="disabled"></select>
</div>
jQuery
调用cityselect插件非常简单,直接调用:
$("#city").citySelect();
自定义参数调用,设置默认省市区。
$("#city").citySelect({
url:"js/city.min.js",
prov:"湖南", //省份
city:"长沙", //城市
dist:"岳麓区", //区县
nodata:"none" //当子集无数据时,隐藏select
});
当然,你还可以扩展,自定义下拉列表选项数据,你可以根据需要设置下拉内容,注意数据格式一定要为JSON格式。
$("#city").citySelect({
url:{"citylist":[
{"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},
{"n":"JAVASCIPT"}]},
{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},
{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},
]},
prov:"",
city:"",
dist:"",
nodata:"none"
});
你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式,然后使用url参数指向后台地址也能实现无刷新联动效果。
$("#city").citySelect({
url:"data.php"
});
更多示例效果请看demo,插件源码下载(含最新省市区数据)
基于jQuery+JSON的省市联动效果
jQuery AJAX
前往
- Software
- ↳ CodeCharge Studio
- ↳ CodeCharge
- ↳ DemoCharge
- ↳ SuperPDF
- ↳ 551einv
- ↳ E3進銷存
- 程式語言
- ↳ PHP
- ↳ CodeLobster PHP Edition
- ↳ Yii
- ↳ CodeIgniter
- ↳ Phalcon
- ↳ Symfony
- ↳ FuelPHP
- ↳ Zend Framework 2
- ↳ laravel
- ↳ WordPress
- ↳ ASP.NET/C#
- ↳ ASP/VBScript
- ↳ JSP
- ↳ Java Servlets
- ↳ ColdFusion
- ↳ Perl
- ↳ Java Script
- ↳ jQuery
- ↳ HTML + CSS
- ↳ jQuery
- ↳ nodejs
- ↳ VB6
- ↳ Git
- ↳ App Inventor 2
- ↳ bash
- ↳ C++/ VC/ OpenCV
- ↳ OpenCV
- ↳ go
- ↳ cordova
- ↳ python
- ↳ Xamarin
- ↳ Assembly
- 資料庫
- ↳ MySQL
- ↳ PostgreSQL
- ↳ ORACLE
- ↳ Access
- ↳ SQL Server
- ↳ SQLite
- ↳ MariaDB
- ↳ Mongodb
- 作業系統
- ↳ Linux
- ↳ Ubuntu
- ↳ CentOS
- ↳ Mint
- ↳ Mandriva
- ↳ Debian
- ↳ Red Hat Enterprise Linux
- ↳ Oracle Linux
- ↳ Fedora
- ↳ Kali Linux
- ↳ OpenSUSE
- ↳ Elementary OS
- ↳ Microsoft
- ↳ Server 2008 R2
- ↳ Server 2012 R2
- ↳ Server 2012
- ↳ 8
- ↳ 10
- ↳ System Center 2016
- ↳ NOVELL
- ↳ FreeBSD
- ↳ VMware
- ↳ VirtualBox
- ↳ Mac OS X
- ↳ Solaris
- ↳ iOS
- ↳ Android
- ↳ Cloud
- ↳ OpenStack
- ↳ Docker
- ↳ Proxmox VE
- ↳ CloudReady
- ↳ chrome
- 網頁伺服器
- ↳ apache
- ↳ tomcat
- ↳ nginx
- ↳ IIS
- ↳ JBoss
- ↳ weblogic
- ↳ WebHosting
- 硬體
- ↳ 硬體及週邊
- ↳ RouterOS
- ↳ LEGO NXT
- ↳ Arduino
- ↳ MSP430
- ↳ Raspberry Pi
- ↳ OpenERP
- ↳ Storage
- ↳ Server
- ↳ Brocade
- ↳ MODELS
- ↳ FortiGate
- 軟體
- ↳ sublime
- ↳ LibreNMS