1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <!--添加jquery-->
6 <script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 $(function () {
9 createSelect("addSel");
10 addOption("addSel", "first", "第一個數據");
11 addOption("addSel", "secord", "第二個數據");
12 addOption("addSel", "three", "第三個數據");
13 addOption("addSel", "four", "第四個數據");
14 addOption("addSel", "fives", "第五個數據");
15 removeOneByIndex("addSel", 0);
16 removeOneByValue("addSel", "three");
17
18 //****************以驗證不可以根據text值取得option元素***********************
19 //removeOneByText("addSel", "第三個數據");
20 //****************以驗證不可以根據text值取得option元素***********************
21
22 //removeAll("addSel"); //刪除select元素的所有options
23 //removeSelect("addSel"); //刪除select元素；
24
25 setDefaultByValue("addSel", "four"); //設置option的預設值
26
27 //添加一個option更改事件 調用自己寫的方法
28 $("#addSel").change(function () {
29 alert("舊文本：" + getOptionText("addSel") + " 舊Value：" + getOptionValue("addSel"));
30 editOptions("addSel", "新文本", "新Value"); //註意：不傳value值的時候 value值預設為text的值
31 alert("新文本：" + getOptionText("addSel") + " 新Value：" + getOptionValue("addSel"));
32 })
33 })
34
35 //動態創建帶id的select
36 function createSelect(id) {
37 $("body").append("<select id="+id+"></select>");
38 }
39
40 //根據select的id 添加選項option
41 function addOption(selectID,value,text) {
42 //根據id查找select對象，
43 var obj = $("#" + selectID + "");
44 $("<option></option>").val(value).text(text).appendTo(obj);
45 }
46
47 //根據value的值設置options預設選中項
48 function setDefaultByValue(selectID,value) {
49 var obj = $("#" + selectID + "");
50 obj.val(value);
51 }
52
53 //獲得選中的Option Value；
54 function getOptionValue(selectID) {
55 //var obj = $("#" + selectID + " option:selected").val();
56 //上面和下麵兩種都可以
57 var obj = $("#" + selectID + "").find("option:selected").val();
58 return obj;
59 }
60
61 //獲得選中的option Text;
62 function getOptionText(selectID) {
63 //var obj = $("#" + selectID + " option:selected").text();
64 //上面和下麵兩種都可以
65 var obj = $("#" + selectID + "").find("option:selected").text();
66 return obj;
67 }
68
69 //修改選中的option
70 function editOptions(selectID, newText, newValue) {
71 var obj = $("#" + selectID + "").find("option:selected");
72 obj.val(newValue).text(newText);
73 }
74
75 //根據 index 值刪除一個選項option
76 function removeOneByIndex(selectID, index) {
77 var obj = $("#" + selectID + " option[index=" + index + "]");
78 obj.remove();
79 }
80
81 //根據 value值刪除一個選項option
82 function removeOneByValue(selectID, text) {
83 var obj = $("#" + selectID + " option[value=" + text + "]");
84 obj.remove();
85 }
86
87 //****************以驗證不可以根據text值取得option元素***********************
88 //根據text值刪除一個選項option 感覺不可用 真的
89 //function removeOneByText(selectID, text) {
90 //var obj = $("#" + selectID + " option[text=" + text + "]");
91 //obj.remove();
92 //}
93 //****************以驗證不可以根據text值取得option元素***********************
94
95 //刪除所有選項option
96 function removeAll(selectID) {
97 var obj = $("#" + selectID + "");
98 obj.empty();
99 }
100
101 //刪除select
102 function removeSelect(selectID){
103 var obj = $("#" + selectID + "");
104 obj.remove();
105 }
106 </script>
107 </head>
108 <body>
109
110 </body>
111 </html>
