jQuery实现省市区三级联动完整版源码演示下载

简介: HTML首先引入jquery库和cityselect插件。<  type="text/ " src="jquery.js">  <  type="text/ " src="jquery.cityselect.js">然后在#city区域里放三个下拉select,对应class为:prov、city、dist,分别表示省、市、区。
HTML

首先引入jquery库和cityselect插件。

<  type="text/ " src="jquery.js"></ >  <  type="text/ " src="jquery.cityselect.js"></ >

然后在#city区域里放三个下拉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:"city.min.js",prov:"湖南", city:"长沙",dist:"岳麓区",nodata:"none" });



你还可以用JSON数据:

    $("#city").citySelect({
        url:{"citylist":[{"p":"前端课程","c":[{"n":"HTML"},{"n":"CSS3","a":[{"s":"HTML5"},{"s":"AJAX"}]},{"n":"JSON"}]},{"p":"编程语言","c":[{"n":"C"},{"n":" ive-C"},{"n":"PHP"},{"n":"Python"}]},
            {"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Mssql"}]},]},prov:"",city:"",dist:"",nodata:"none"}
    );

你还可以加载PHP文件,是不是很强大啊^_^


$("#city").citySelect({      url:"ajax.php"  });


效果图片:

big.jpg

原文章下载演示地址:http://www.erdangjiade.com/js/34.html

相关文章
|
1月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
17 1
jQuery+CSS3自动轮播焦点图特效源码
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
60 0
|
4月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
52 0
|
11月前
|
JavaScript 前端开发
三分钟手写一个迷你jQuery,附源码
诚然,不管前端技术怎么发展,重心都不会变,就是 操作DOM + 获取数据。 下面的代码演示了如何快速手写一个简单的jQuery:
|
JavaScript 前端开发 Java
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
jquery实现动态表格项目(表格增加删除/全选/表格变色特效) 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信 一起学习、一起进步 🍅 欢迎点赞 👍 收藏 ⭐留言 📝
267 0
jquery实现动态表格项目(表格增加删除/全选/表格变色特效等功能)(附源码+javaWEB开发如果需要可以直接使用)
|
JavaScript 前端开发 Java
JQuery实现灯泡开关【文末附源码】
JQuery实现灯泡开关【文末附源码】 🍅 Java学习路线:搬砖工的Java学习路线 🍅 作者:程序员小王 🍅 程序员小王的博客:https://www.wolai.com/wnaghengjie/ahNwvAUPG2Hb1Sy7Z8waaF 🍅 扫描主页左侧二维码,加我微信
164 0
JQuery实现灯泡开关【文末附源码】
|
JavaScript
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
114 0
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
241 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
501 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
JavaScript 安全 Windows
js或jquery实现页面打印可局部打印
js或jquery实现页面打印可局部打印
228 0