廢話{

?? 誕生背景:?

???? 問: 1.大家在做省市區下拉框聯動,或者是產品分類聯動,或者是部門聯動等下拉框時怎么做?? 是用ajaxpro.dll? 還是jquery ajax呢???

?????答: 是,留下繼續閱讀.

????????? 否,跟帖回復你的方法

???? 結論:每次重復勞動 重復創造聯動的下拉框, 累,想死!!?? 讀完本文 您也許可以找到更好的方法來實現 無限級(理論) 的聯動下拉框,也許只要10秒鐘就夠了.

???? 就這樣,一個自動產生聯動下拉框的插件誕生了...?

???? 本插件依賴于jquery1.4.2? 最低版本自行測試.

}

?

?

廢話完畢.

?

代碼:

??????? <div class="zldd-AutoComboBox" id="div_autoComboBox">
??????? </div>

　　調用方法:

?????? var data= [{ "id": 25, "text": "淮安分公司", "children": [{ "id": 26, "text": "辦公室（行政人事培訓）"}] }, { "id": 52, "text": "研發部" }, { "id": 53, "text": "財務部"}]

??????????? $("#div_autoComboBox").AutoComboBox({
??????????????? cssClass: "autoComboBox",
??????????????? nullDispaly: true,
??????????????? //url: "ComboBoxTreeDept_Data.aspx",
??????????????? //如果沒有使用遠程數據 則可以使用本地數據源 使用上面定義的data變量? 注:如果url不為空時 優先使用遠程數據源?

??????????????? //?ps:只請求一次數據庫,數據源將存放在客戶端
??????????????? data:data,
??????????????? firstValue: [true, "==請選擇==", "==請選擇=="]? //是否自動創建第一個值? 這個值通常為 請選擇 ,不限等
??????????? });

??????結果:?? 這樣就一個無限級(理論) 的聯動下拉框就出來了..??? 如果你拷貝一下以上代碼,修改一下url參數 10秒鐘夠了吧??? 注:關于json格式,包括名稱,請自行轉換,本源碼也包含一個只針對本插件轉換json的一個dll.?

(引用后:

????????????? ///dataset 數據源

????????????? ///要顯示text?

????????????? ///id,,? 你懂的?

????????????? ///父id,?? 你也懂的

????????????? ///忽略....

??????????? string treeJson = zlddEasyUiHelp.CreateTree.DataSetToTree(ds_department, "Dept_Name", "Dept_ID", "Dept_PId",false);

)

????

???? 問:我怎么獲取用戶選擇的值.?

???? 答:??一句代碼搞定,并支持多個參數重載

???????????$("#div1").ComboBoxGetValue([index],[ErrorFn]);??

????????? //可選參數說明:

????????? //index,獲取第幾個下拉框的值,默認最后一個(如果不填寫也是獲取最后一個值)

????????? //?ErrorFn,獲取值時遇到錯誤? 如:假設現在是省市區聯動,您要獲取第三個下拉框(區),但是用戶只選擇到了市,這將會獲取不到,那么將調用傳遞進去的方法

???????? //該回調方法寫法如下:

???????? var ErrorFn = function () {
??????????? alert("錯誤了");
??????? }

?

?看到此處您是否會用了???如果不會,你懂的,回帖....

?

接下來說下"修改"功能

如:剛才用戶選擇了自己的 地址, 那么現在用戶需要修改,用戶剛才選擇到了"區",我們要初始化聯動下拉框 并且要設置區,市,省的默認值.

很簡單:?? 在上面的代碼加一句話(下方紅色標注的代碼)就會自動初始化帶默認值的聯動下拉框?

例:

???????? $("#div_autoComboBox").AutoComboBox({
??????????????? cssClass: "autoComboBox",
??????????????? nullDispaly: true,
??????????????? //url: "ComboBoxTreeDept_Data.aspx",
??????????????? //如果沒有使用遠程數據 則可以使用本地數據源 使用上面定義的data變量? 注:如果url不為空時 優先使用遠程數據源?

??????????????? //?ps:只請求一次數據庫,數據源將存放在客戶端
??????????????? data:data,

????????????????defaultValue: 76,
??????????????? firstValue: [true, "==請選擇==", "==請選擇=="]? //是否自動創建第一個值? 這個值通常為 請選擇 ,不限等
??????????? });

?

?

?

到此介紹完畢

源碼下載, 猛點此處V1.0

?(源碼只包括插件源碼,轉換json格式字符串的dll)

??

?2010年12月21日17:35:53編輯

?明日更新 增加獲得用戶選中項?的text功能.

感謝 迷途的小書童?????提出的意見..

?

?

?2011年1月4日17:12:39更新

版本 v1.1

更新內容

? 修復部分已知bug(如果子類沒有頂級選項如"請選擇" 造成第三級無法創建的問題)

? 增加獲取選定項對象的方法

? 性能的優化

源碼下載,猛點此處v1.1??????

???

　　

?

?

轉載于:https://www.cnblogs.com/337212522/archive/2010/12/21/1912381.html

總結

以上是生活随笔為你收集整理的jquery插件 autoComboBox 自动创建联动的下拉框 如:省市区联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。