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("select", "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 removeOneByObj("addSel", "secord");
17
18 //添加一個option更改事件 調用自己寫的方法
19 $("#addSel").change(function () {
20 alert("舊文本："+getOptionText("addSel") + "舊Value：" + getOptionValue("addSel"));
21 editOptions("addSel", "新文本","新Value"); //註意：不傳value值的時候 value值預設為text的值
22 alert("新文本：" + getOptionText("addSel") + "新Value：" + getOptionValue("addSel"));
23 })
24 })
25
26 //動態創建帶id的元素
27 function createSelect(element, id) {
28 var select = document.createElement(element);
29 select.id = id;
30 document.body.appendChild(select);
31 }
32
33 //根據select的id 添加選項option
34 function addOption(selectID,value,text) {
35 //根據id查找對象，
36 var obj = document.getElementById(selectID);
37 obj.options.add(new Option(text, value)); //這個相容IE與firefox
38 }
39
40 //刪除所有選項option
41 function removeAll(selectID) {
42 var obj = document.getElementById(selectID);
43 obj.options.length = 0;
44 }
45
46 //根據 index 值刪除一個選項option
47 function removeOneByIndex(selectID,index) {
48 var obj = document.getElementById(selectID);
49 //index,要刪除選項的序號，這裡取當前選中選項的序號
50 //var index = obj.selectedIndex;//獲取選中的選項的index;
51 obj.options.remove(index);
52 }
53
54 //根據 value或者text值刪除一個選項option
55 function removeOneByObj(selectID, textOrValue) {
56 var obj = document.getElementById(selectID);
57 //index,要刪除選項的序號，這裡取當前選中選項的序號
58 //var index = obj.selectedIndex;//獲取選中的選項的index;
59 for (var i = 0; i < obj.options.length; i++) {
60 if (obj.options[i].innerHTML == textOrValue || obj.options[i].value == textOrValue) {
61 obj.options.remove(i);
62 break;
63 }
64 }
65 }
66
67 //獲得一個Option Value；
68 function getOptionValue(selectID){
69 var obj = document.getElementById(selectID);
70 var index=obj.selectedIndex; //序號，取當前選中選項的序號
71 var val = obj.options[index].value;
72 return val;
73 }
74
75 //獲得一個option Text;
76 function getOptionText(selectID) {
77 var obj = document.getElementById(selectID);
78 var index=obj.selectedIndex; //序號，取當前選中選項的序號
79 var val = obj.options[index].text;
80 return val;
81 }
82
83 //修改選中的option
84 function editOptions(selectID,newText,newValue) {
85 var obj = document.getElementById(selectID);
86 var index=obj.selectedIndex; //序號，取當前選中選項的序號
87 obj.options[index] = new Option(newText, newValue);
88 obj.options[index].selected = true;
89 }
90
91 //刪除select
92 function removeSelect(){
93 var select = document.getElementById("select");
94 select.parentNode.removeChild(select);
95 }
96 </script>
97 </head>
98 <body>
99
100 </body>
101 </html>
