【jquery版.net控件—dropdownlist】附源码，欢迎大家指点、指正、拍砖！！！
生活随笔
收集整理的這篇文章主要介紹了
【jquery版.net控件—dropdownlist】附源码，欢迎大家指点、指正、拍砖！！！
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
為了2012第一個春天，為了我那卑微的工資，為了我那偉大的愛情............................
其實是為了自我能力的提升罷了，呵呵！！！（也是為了漲工資吧...）
小弟準備向web前段開炮，而對js與jq都是初學，現在借博客園這塊寶地來督促自己，借博客園的高手來提點自己。
小弟準備陸陸續續用jquery模仿一點.net的控件以提高自己，順便看看能不能弄一點可用插件出來，各位大哥看到了多多指點哦。
控件簡單應用
效果圖
1 初始化效果
生成的html代碼
2 控件選項改變事件以及列表項點擊事件（最后三項后期加入未作事件綁定）
3 前臺調用代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="js/dropDownList.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var data = []; for (var i = 0; i < 3; i++) { data[i] = {}; data[i]["v"] = "value_" + i.toString(); data[i]["t"] = "text_" + i.toString(); } var $div = $("#divwl"); var drop1 = new dropDownList("drop1"); drop1.event.onChange = onSelectChanged; drop1.itemEvent.onClick = onItemClick; drop1.dataSource = data; drop1.dataValueField = "v"; drop1.dataTextField = "t"; drop1.dataTitleField = "v"; drop1.dataBind($div); drop1.setSelectedText("text_2"); //動態添加選擇項，此處選擇項沒有事件 for (var i = 0; i < 3; i++) { var v = "inertValue_" + i; var t = "insertText_" + i; var _item = new item(v, t); _item.load(); drop1.insertItem(_item); } drop1.style.width = '300px'; drop1.style.height = '25px'; drop1.style.background = 'Gray'; drop1.styleLoad(); //事件處理函數 function onItemClick() { var sender = this; var optionSender = sender.htmlElement; var selectedValue = optionSender.val(); var item = sender; var $div = $("#itemText"); $div.html("單項點擊事件<hr/>" + "當前項：" + item.attribute.text + "<br/>當前值：" + selectedValue); $div.fadeIn(500); $div.fadeOut(5000); } function onSelectChanged() { var sender = this; var dropSender = sender.htmlElement; var selectedValue = dropSender.val() var item = sender.getSelectedItem(); var $div = $("#text"); $div.html("dropdownlist的改變事件<hr/>" + "當前項：" + item.attribute.text + "<br/>當前值：" + selectedValue); $div.fadeIn(500); $div.fadeOut(5000); } function onSelectClick() { var sender = this; var dropSender = sender.htmlElement; var selectedValue = dropSender.val() var $div = $("#text"); $div.html("dropdownlist的點擊事件，當前值：" + selectedValue); $div.fadeIn(500); $div.fadeOut(5000); } }); </script> </head> <body> <div id="divwl"> </div> <div id="text"> </div> <div id="itemText"> </div> </body> </html> 1 數據源
數據源為我們動態寫入的數組。
復制代碼 var data = []; for (var i = 0; i < 3; i++) { data[i] = {}; data[i]["v"] = "value_" + i.toString(); data[i]["t"] = "text_" + i.toString(); }
var $div = $("#divwl"); var drop1 = new dropDownList("drop1"); 復制代碼 2 基本調用說明
復制代碼 1 ?drop1.event.onChange = onSelectChanged; 2 ? ? ? ? ? ? drop1.itemEvent.onClick = onItemClick; 3 ? ? ? ? ? ? drop1.dataSource = data; 4 ? ? ? ? ? ? drop1.dataValueField = "v"; 5 ? ? ? ? ? ? drop1.dataTextField = "t"; 6 ? ? ? ? ? ? drop1.dataTitleField = "v"; 7 ? ? ? ? ? ? drop1.dataBind($div); 8? 9 ? ? ? ? ? ? drop1.setSelectedText("text_2"); 復制代碼 與.net控件基本一致，給定數據源，但是我這里多出了一個dataTitleField用以顯示提示框。
其中，drop1.event.onChange = onSelectChanged;為select 的事件
drop1.itemEvent.onClick = onItemClick; 為option的事件綁定
注意，此處事件綁定采用的是call的用法，所以下方函數：中的this作用域環境要注意。
3 動態添加列表項
復制代碼 1 ?//動態添加選擇項，此處選擇項沒有事件 2 ? ? ? ? ? ? for (var i = 0; i < 3; i++) { 3 ? ? ? ? ? ? ? ? var v = "inertValue_" + i; 4 ? ? ? ? ? ? ? ? var t = "insertText_" + i; 5 ? ? ? ? ? ? ? ? var _item = new item(v, t); 6 ? ? ? ? ? ? ? ? _item.load(); 7 ? ? ? ? ? ? ? ? drop1.insertItem(_item); 8 ? ? ? ? ? ? } 復制代碼 此處添加的項，便沒有做事件綁定了。
再下面的代碼便是對應函數便不多說了。
控件數據源Ajax獲取應用
1 效果圖
基本界面
Ajax獲得json數據源：
[{"id":1,"name":"河北"},{"id":2,"name":"江蘇"},{"id":3,"name":"四川"},{"id":4,"name":"貴州"}]
對應數據庫數據：
點擊對應省份引發改變事件
獲取數據源：
[{"id":8,"provinceId":3,"name":"成都"},{"id":9,"provinceId":3,"name":"綿陽"},{"id":10,"provinceId":3,"name":"遂寧"},{"id":11,"provinceId":3,"name":"南充"}] 前臺調用代碼：
復制代碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="js/dropDownList.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var dataProvince = null; $.ajax({ type: "post", url: "Ajax.aspx?sql=select ?* from province ? ", type: "json", async: false, success: function (data) { dataProvince = data; } });
var $div = $("#province"); var drop1 = new dropDownList("dropProvince"); drop1.event.onChange = onSelectChanged; drop1.dataSource = dataProvince; drop1.dataValueField = "id"; drop1.dataTextField = "name"; drop1.dataTitleField = "name"; drop1.dataBind($div); var _item = new item("-1", "==請選擇省份=="); drop1.insertItem(_item); drop1.setSelectedText("==請選擇省份==");
function onSelectChanged() { var sender = this; // ? ? ? ? ? ? ? ?var provinceId = sender.getSelectedValue();//也可以 var provinceId = drop1.getSelectedValue();
var dataProvince = null; $.ajax({ type: "post", url: "Ajax.aspx?sql=select ?* from city where provinceId=" + provinceId + " ? ", type: "json", async: false, success: function (data) { dataProvince = data; } }); var $div1 = $("#city"); var dropCity = new dropDownList("dropCity");
$div1.html("市："); dropCity.dataSource = dataProvince; dropCity.dataValueField = "id"; dropCity.dataTextField = "name"; dropCity.dataTitleField = "name"; dropCity.dataBind($div1);
}
}); </script> </head> <body> <div id="province"> 省： </div> <hr /> <div id="city"> 市： </div> </body> </html> 復制代碼 這個我便暫時不說明了吧，很晚了，明天還要上班呢......
因為不知道看的人多不多，也不知道大家有沒有問他，若是有問題我再解答吧，具體請大家自己去運行吧。
dropdownlist源代碼
本文轉自葉小釵博客園博客，原文鏈接：http://www.cnblogs.com/yexiaochai/archive/2012/02/10/2344750.html如需轉載請自行聯系原作者
為了2012第一個春天，為了我那卑微的工資，為了我那偉大的愛情............................
其實是為了自我能力的提升罷了，呵呵！！！（也是為了漲工資吧...）
小弟準備向web前段開炮，而對js與jq都是初學，現在借博客園這塊寶地來督促自己，借博客園的高手來提點自己。
小弟準備陸陸續續用jquery模仿一點.net的控件以提高自己，順便看看能不能弄一點可用插件出來，各位大哥看到了多多指點哦。
控件簡單應用
效果圖
1 初始化效果
生成的html代碼
2 控件選項改變事件以及列表項點擊事件（最后三項后期加入未作事件綁定）
3 前臺調用代碼
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="js/dropDownList.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var data = []; for (var i = 0; i < 3; i++) { data[i] = {}; data[i]["v"] = "value_" + i.toString(); data[i]["t"] = "text_" + i.toString(); } var $div = $("#divwl"); var drop1 = new dropDownList("drop1"); drop1.event.onChange = onSelectChanged; drop1.itemEvent.onClick = onItemClick; drop1.dataSource = data; drop1.dataValueField = "v"; drop1.dataTextField = "t"; drop1.dataTitleField = "v"; drop1.dataBind($div); drop1.setSelectedText("text_2"); //動態添加選擇項，此處選擇項沒有事件 for (var i = 0; i < 3; i++) { var v = "inertValue_" + i; var t = "insertText_" + i; var _item = new item(v, t); _item.load(); drop1.insertItem(_item); } drop1.style.width = '300px'; drop1.style.height = '25px'; drop1.style.background = 'Gray'; drop1.styleLoad(); //事件處理函數 function onItemClick() { var sender = this; var optionSender = sender.htmlElement; var selectedValue = optionSender.val(); var item = sender; var $div = $("#itemText"); $div.html("單項點擊事件<hr/>" + "當前項：" + item.attribute.text + "<br/>當前值：" + selectedValue); $div.fadeIn(500); $div.fadeOut(5000); } function onSelectChanged() { var sender = this; var dropSender = sender.htmlElement; var selectedValue = dropSender.val() var item = sender.getSelectedItem(); var $div = $("#text"); $div.html("dropdownlist的改變事件<hr/>" + "當前項：" + item.attribute.text + "<br/>當前值：" + selectedValue); $div.fadeIn(500); $div.fadeOut(5000); } function onSelectClick() { var sender = this; var dropSender = sender.htmlElement; var selectedValue = dropSender.val() var $div = $("#text"); $div.html("dropdownlist的點擊事件，當前值：" + selectedValue); $div.fadeIn(500); $div.fadeOut(5000); } }); </script> </head> <body> <div id="divwl"> </div> <div id="text"> </div> <div id="itemText"> </div> </body> </html> 1 數據源
數據源為我們動態寫入的數組。
復制代碼 var data = []; for (var i = 0; i < 3; i++) { data[i] = {}; data[i]["v"] = "value_" + i.toString(); data[i]["t"] = "text_" + i.toString(); }
var $div = $("#divwl"); var drop1 = new dropDownList("drop1"); 復制代碼 2 基本調用說明
復制代碼 1 ?drop1.event.onChange = onSelectChanged; 2 ? ? ? ? ? ? drop1.itemEvent.onClick = onItemClick; 3 ? ? ? ? ? ? drop1.dataSource = data; 4 ? ? ? ? ? ? drop1.dataValueField = "v"; 5 ? ? ? ? ? ? drop1.dataTextField = "t"; 6 ? ? ? ? ? ? drop1.dataTitleField = "v"; 7 ? ? ? ? ? ? drop1.dataBind($div); 8? 9 ? ? ? ? ? ? drop1.setSelectedText("text_2"); 復制代碼 與.net控件基本一致，給定數據源，但是我這里多出了一個dataTitleField用以顯示提示框。
其中，drop1.event.onChange = onSelectChanged;為select 的事件
drop1.itemEvent.onClick = onItemClick; 為option的事件綁定
注意，此處事件綁定采用的是call的用法，所以下方函數：中的this作用域環境要注意。
3 動態添加列表項
復制代碼 1 ?//動態添加選擇項，此處選擇項沒有事件 2 ? ? ? ? ? ? for (var i = 0; i < 3; i++) { 3 ? ? ? ? ? ? ? ? var v = "inertValue_" + i; 4 ? ? ? ? ? ? ? ? var t = "insertText_" + i; 5 ? ? ? ? ? ? ? ? var _item = new item(v, t); 6 ? ? ? ? ? ? ? ? _item.load(); 7 ? ? ? ? ? ? ? ? drop1.insertItem(_item); 8 ? ? ? ? ? ? } 復制代碼 此處添加的項，便沒有做事件綁定了。
再下面的代碼便是對應函數便不多說了。
控件數據源Ajax獲取應用
1 效果圖
基本界面
Ajax獲得json數據源：
[{"id":1,"name":"河北"},{"id":2,"name":"江蘇"},{"id":3,"name":"四川"},{"id":4,"name":"貴州"}]
對應數據庫數據：
點擊對應省份引發改變事件
獲取數據源：
[{"id":8,"provinceId":3,"name":"成都"},{"id":9,"provinceId":3,"name":"綿陽"},{"id":10,"provinceId":3,"name":"遂寧"},{"id":11,"provinceId":3,"name":"南充"}] 前臺調用代碼：
復制代碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="js/dropDownList.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var dataProvince = null; $.ajax({ type: "post", url: "Ajax.aspx?sql=select ?* from province ? ", type: "json", async: false, success: function (data) { dataProvince = data; } });
var $div = $("#province"); var drop1 = new dropDownList("dropProvince"); drop1.event.onChange = onSelectChanged; drop1.dataSource = dataProvince; drop1.dataValueField = "id"; drop1.dataTextField = "name"; drop1.dataTitleField = "name"; drop1.dataBind($div); var _item = new item("-1", "==請選擇省份=="); drop1.insertItem(_item); drop1.setSelectedText("==請選擇省份==");
function onSelectChanged() { var sender = this; // ? ? ? ? ? ? ? ?var provinceId = sender.getSelectedValue();//也可以 var provinceId = drop1.getSelectedValue();
var dataProvince = null; $.ajax({ type: "post", url: "Ajax.aspx?sql=select ?* from city where provinceId=" + provinceId + " ? ", type: "json", async: false, success: function (data) { dataProvince = data; } }); var $div1 = $("#city"); var dropCity = new dropDownList("dropCity");
$div1.html("市："); dropCity.dataSource = dataProvince; dropCity.dataValueField = "id"; dropCity.dataTextField = "name"; dropCity.dataTitleField = "name"; dropCity.dataBind($div1);
}
}); </script> </head> <body> <div id="province"> 省： </div> <hr /> <div id="city"> 市： </div> </body> </html> 復制代碼 這個我便暫時不說明了吧，很晚了，明天還要上班呢......
因為不知道看的人多不多，也不知道大家有沒有問他，若是有問題我再解答吧，具體請大家自己去運行吧。
dropdownlist源代碼
本文轉自葉小釵博客園博客，原文鏈接：http://www.cnblogs.com/yexiaochai/archive/2012/02/10/2344750.html如需轉載請自行聯系原作者
總結
以上是生活随笔為你收集整理的【jquery版.net控件—dropdownlist】附源码，欢迎大家指点、指正、拍砖！！！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 阿里云服务器tomcat配置https
- 下一篇： 报名 | 想在硅谷近距离接触蚂蚁金服的C