DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery插件 autoComboBox 下拉框
jquery插件 autoComboBox 下拉框
編輯:JQuery特效代碼     
問: 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, "==請選擇==", "==請選擇=="] //是否自動創建第一個值 這個值通常為 請選擇 ,不限等
});


關於"修改"功能的誕生背景,有興趣的看...
話說本插件是不可以設置默認值的,也就是不能自初始化帶默認值的下拉框
但是,由於一個美女誘惑我,說"你要弄出來,我就干嘛嘛",,具體干嘛,各位懂的....
到此介紹完畢
源碼下載,/201012/yuanma/AutoComboBoxs.rar(已更新)

(源碼只包括插件源碼,轉換json格式字符串的dll)
2011年1月4日17:12:39更新

版本 v1.1

更新內容

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

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

性能的優化


原文: http://www.cnblogs.com/337212522/archive/2010/12/21/1912381.html
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved