jQuery实现省市区三级联动完整版源码演示下载-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章