jQuery實現省市區三級聯動完整版原始碼演示下載

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