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

来源：互联网发布：机器人算法有哪些编辑：程序博客网时间：2024/04/28 23:40

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"  });

效果图片：

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

1 0