jquery.cityselect.js基於jQuery+JSON的省市或自定義聯動效果

林加欣發表於2016-10-14
jQueryJSON

一、外掛介紹

最早做省市聯動的時候都特別麻煩，後來在helloweba的一篇文章中看到這個外掛，很不錯的，後來就一直用了。

省市區聯動下拉效果在WEB中應用非常廣泛，尤其在一些會員資訊系統、電商網站最為常見。開發者一般使用Ajax實現無重新整理下拉聯動。本文將講述，利用jQuery外掛，通過讀取JSON資料，實現無重新整理動態下拉省市二（三）級聯動效果。

 

二、外掛作者及網址

作者：暫無(請作者看到後聯絡我403236160@qq.com，好標上你的大名)
官方網址：無
官方DEMO：無
最新版本：日期2012-7-18

三：外掛引數

引數名 預設值 字元型別 使用頻率 釋義說明
url js/city.min.js string 常用 省市資料josn檔案路徑
prov null string 常用 預設省份
city null string 常用 預設城市
dist null boolean 常用 預設地區（縣）
nodata null string 常用 無資料狀態
required true boolean 常用 必選項

下載引數文件 http://www.ijquery.cn/demo/cityselect/cityselect.js引數說明.xls

四：外掛案例

1、本站案例
a>demo1  http://www.ijquery.cn/demo/cityselect

下載  http://www.ijquery.cn/demo/cityselect/cityselect.zip

如圖：

五：最簡使用教程

示例：http://www.ijquery.cn/demo/cityselect/simple.html

1、HTML程式碼

<div id="city"> 
	<select class="prov"></select>  
	<select class="city" disabled="disabled"></select> 
	<select class="dist" disabled="disabled"></select> 
</div>

2、JS和CSS程式碼 ，請注意這裡預設需要把城市資料庫 city.min.js 放到 jquery.cityselect.js 所在的資料庫中，千萬不要丟失！

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cityselect.js"></script>
<script type="text/javascript">
	$(function(){
		$("#city").citySelect({
			nodata:"none",
			required:false
		}); 
	});
</script>

為方便可以直接引用絕對地址

這裡的city.mini.js的絕對地址在 http://www.ijquery.cn/js/cityselect/city.min.js

 

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/cityselect/jquery.cityselect.js"></script>
<script type="text/javascript">
	$(function(){
		$("#city").citySelect({
			nodata:"none",
			required:false
		}); 
	});
</script>

 

繼續瀏覽有關 Jquery外掛聯動外掛表單外掛高階頁面 的文章

相關文章