LinkageSel:javascript 無限級聯動下拉菜單 省市地多級聯動多屬性值下拉菜單 2014.10.04更新...

[b]javascript 無限級聯動多屬性值下拉菜單[/b]

無限級聯動,支持Ajax動態獲取數據並緩存數據,動態生成下級select菜單,設置動態生成"option"第一個條目作爲提示項,自動選擇唯一選項的菜單,設置回調函數在onChange事件觸發時獲取下拉菜單相關信息。

[url=https://github.com/waitingsong/LinkageSel]GitHub Repository[/url]

特點:

1、數據記錄可以包含多個屬性信息便於前臺操作

2、數據來源多樣性,可以本地js加載,或者ajax動態獲取,甚至本地+ajax動態複合方式(比如本地只加載第一級主要數據,動態獲取下級數據)

3、可動態生成下級菜單。可動態隱藏下級菜單。可自定義菜單寬度或者自適應寬度

4、可自定義菜單第一個提示選項(比如“請選擇”),可自定義自動隱藏提示選擇選項如果數據唯一

5、緩存ajax獲得信息。並且如果到達樹枝末端兩次後將不會對此節點發起新的ajax請求減小服務端負載

6、可自定義onchange回調函數實現多功能


[b]詳細功能、參數設置及請見[url=http://linkagesel.xiaozhong.biz] DEMO[/url]
[url=http://linkagesel.xiaozhong.biz/linkagesel.zip]猛擊我下載最新版[/url][/b]


由於數據結構不同以及信息量不同,所以全國區劃代碼的本地district-all.js文件比RayChou的要大許多,可以考慮自己裁減或者ajax方式動態獲取。

如果是demo本地瀏覽,則ajax方式將無法獲得數據


沒精力去美化界面,所以頁面基本照搬RayChou朋友的 [img]/images/smiles/icon_biggrin.gif" alt="[/img]

如果有朋友喜歡甚爲高興,有bug歡迎提出~


UPDATE:

[b]2013.05.08 v2.0[/b]
Bug Fixes
---------
* ajax_loader offset值不正常導致ajax請求時導致body寬度/高度鉅變從而滾動條不正常
* 當本地未加載(js)數據全部ajax請求且defVal有值時第一級菜單無法觸發ajax請求

Add Features
---------
+ 參數增加 dataReader,默認值爲 {id: 'id', name: 'name', cell: 'cell'} 用於自定義定義數據的key鍵名。並且dataReader.id的值也用於生成ajax請求URL。若dataReader.id值空則id值取數據迭代的key值。詳細見demo


[b]2013.04.25 v1.33[/b]
Bug Fixes
---------
* selClass設置默認值'LinkageSel',無論是自動創建的還是預先創建的每個<select>對象都會擁有此class,你可以在css樣式文件中定義此類的樣式

Changes
---------
* selStyle設置默認值改爲空

Updates
---------
+ 添加天津濱海新區,重慶北部新區、兩江新區,遼寧瀋陽市沈北新區,貴州貴陽觀山湖區數據

[b]2013.04.10 v1.32[/b]
Bug Fixes
---------
* elm not exists when bindIdx is 0

[b]2013.03.22[/b] v1.31
Bug Fixes
---------
* 當改變爲值爲null或空的選項時未執行onChange()回調函數。eg. 對於Demo2來說當從其他選項改爲“請選擇”時未執行回調函數


[b]2013.03.05[/b] v1.3
Add Features
---------
+ 添加mvcQuery參數(bool),置true後ajax請求會生成符合MVC格式的URI, 比如 http://linkagesel.xiaozhong.biz/district/get_nodes/0
URI第一個分段district爲controller控制器名,第二分段get_nodes爲方法名,第三分段爲id的值。此時 ajax值需要設定爲MVC格式,
比如 ajax: 'district/get_nodes'。可與CodeIgniter等PHP框架配合使用


Bug Fixes
---------
* this.st.loaderImg HTML代碼生成問題。感謝 jeff-stric(jeff-stric.iteye.com)朋友提供
* this.st.loaderImg 值未轉義

Changes
---------
* 要求jQuery v1.6及以上版本,不再提供兼容jQuery v1.6pre的版本,可自行代碼以便適用於低版本jQuery
* 因爲jQuery v1.9版本廢棄了 $.browser 方法,所以如果使用jQuery1.9並且未加載第三方代碼判斷瀏覽器,則LinkageSel會把IE6-8都判斷爲IE6(用於事件觸發)


[b]2010.08.25[/b] v1.1
更新到v1.1 新增1個實例方法 changeValues(),更改district-level1.js,district-level2.js內全局變量名稱以便 可以同時加載多個地區變量而互相不影響


[b]2010.08.26 v1.2[/b]
更新到v1.2

fix: 在jQueryUI dialog模態窗口下使用時如果下拉列表較長則多次打開窗口後再次打開時FireFox下會出現頁面閃動

add: 以下實例方法返回實例對象可鏈式操作其他方法 changeValues, onChange, reset, resetAll。比如 linkageSel.reset().changeValues([23, 2244]);

mod: 使用緩衝池複用更新菜單時被刪除的對象


[b]2011.05.30 v1.22[/b]

fix: ie6判斷賦值錯誤,導致在IE6下JS加載錯誤。可以在1.2版文件上直接修改

jquery.linkagesel.js 54行:

st.ie6 = true; ------> this.ie6 = true;

jquery.linkagesel-min.js

{st.ie6=true} ---------> {this.st.ie6=true}


[b]2011.07.31 v1.24[/b]

fix: ie6延時問題,DEMO9無法觸發生成聯動菜單。


chg: 生成方式

upd: 提供兼容jQuery v1.6+的版本,採用.prop()替代.attr()操作對象特性
發佈了8 篇原創文章 · 獲贊 0 · 訪問量 2479
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章