1 <script type="text/javascript">
2 // 1.动态创建select
3 function createSelect() {
4 var mySelect = document.createElement("select");
5 mySelect.id = "mySelect";
6 document.body.appendChild(mySelect);
7 }
8
9 //2.添加选项option
10
11 function addOption() {
12 //根据id查找对象，
13 var obj = document.getElementById('mySelect');
14 //添加一个选项
15 obj.add(new Option("文本", "值")); //这个只能在IE中有效
16 obj.options.add(new Option("text", "value")); //这个兼容IE与firefox
17 }
18
19 //3.删除所有选项option
20
21 function removeAll() {
22 var obj = document.getElementById('mySelect');
23 obj.options.length = 0;
24 }
25
26 //4.删除一个选项option
27
28 function removeOne() {
29 var obj = document.getElementById('mySelect');
30 //index,要删除选项的序号，这里取当前选中选项的序号
31 var index = obj.selectedIndex;
32 obj.options.remove(index);
33 }
34
35 //5.获得选项option的值
36
37 var obj = document.getElementById('mySelect');
38 var index = obj.selectedIndex; //序号，取当前选中选项的序号
39 var val = obj.options[index].value;
40
41 //6.获得选项option的文本
42
43 var obj = document.getElementById('mySelect');
44 var index = obj.selectedIndex; //序号，取当前选中选项的序号
45 var val = obj.options[index].text;
46
47 //7.修改选项option
48
49 var obj = document.getElementById('mySelect');
50 var index = obj.selectedIndex; //序号，取当前选中选项的序号
51 var val = obj.options[index] = new Option("新文本", "新值");
52
53 //8.删除select
54
55 function removeSelect() {
56 var mySelect = document.getElementById("mySelect");
57 mySelect.parentNode.removeChild(mySelect);
58 }
59 </script>
60
61 <!--//整个实例的完整代码如下：-->
62
63 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
64 <html>
65
66 <head>
67 <meta http-equiv="Content-Type" content="text/html">
68
69 <head>
70 <script language=JavaScript>
71 function $(id) {
72 return document.getElementById(id)
73 }
74
75 function show() {
76 var selectObj = $("area")
77 var myOption = document.createElement("option")
78 myOption.setAttribute("value", "10")
79 myOption.appendChild(document.createTextNode("上海"))
80 var myOption1 = document.createElement("option")
81 myOption1.setAttribute("value", "100")
82 myOption1.appendChild(document.createTextNode("南京"))
83 selectObj.appendChild(myOption)
84 selectObj.appendChild(myOption1)
85 }
86
87 function choice() {
88 var index = $("area").selectedIndex;
89 var val = $("area").options[index].getAttribute("value")
90 if(val == 10) {
91 var i = $("context").childNodes.length - 1;
92 var remobj = $("context").childNodes[i];
93 remobj.removeNode(true)
94 var sh = document.createElement("select")
95 sh.add(new Option("浦东新区", "101"))
96 sh.add(new Option("黄浦区", "102"))
97 sh.add(new Option("徐汇区", "103"))
98 sh.add(new Option("普陀区", "104"))
99 $("context").appendChild(sh)
100 }
101 if(val == 100) {
102 var i = $("context").childNodes.length - 1;
103 var remobj = $("context").childNodes[i];
104 remobj.removeNode(true)
105 var nj = document.createElement("select")
106 nj.add(new Option("玄武区", "201"))
107 nj.add(new Option("白下区", "202"))
108 nj.add(new Option("下关区", "203"))
109 nj.add(new Option("栖霞区", "204"))
110 $("context").appendChild(nj)
111 }
112 }
113
114 function calc() {
115 var x = $("context").childNodes.length - 1;
116 alert(x)
117 }
118
119 function remove() {
120 var i = $("context").childNodes.length - 1;
121 var remobj = $("context").childNodes[i];
122 remobj.removeNode(true)
123 }
124 </script>
125
126 <body>
127 <div id="context">
128 <select id="area" onchange="choice()">
129 </select>
130 </div>
131 <input type=button value="显示" onclick="show()">
132 <input type=button value="计算结点" onclick="calc()">
133 <input type=button value="删除" onclick="remove()">
134 </body>
135
136 </html>
137
138
139 <!--改进版：-->
140
141 <script type="text/javascript">
142 //改进版：在select中添加、修改、删除option元素
143
144 function watch_ini() { // 初始
145 for(var i = 0; i < arguments.length; i++) {
146 var word = document.createElement("OPTION");
147 word.text = arguments[i];
148 watch.keywords.add(word); // watch. is form name
149 }
150 }
151
152 function watch_add(f) { // 增加
153 var word = document.createElement("OPTION");
154 word.text = f.word.value;
155 f.keywords.add(word);
156 }
157
158 //但上述 add() 方法只在IE下有效，为兼容FF和Opera，对上述代码进行了一下改进，改动后代码如下：
159
160 function watch_ini() { // 初始
161 for(var i = 0; i < arguments.length; i++) {
162 var oOption = new Option(arguments[i], arguments[i]);
163 document.getElementById("MySelect")[i] = oOption;
164 }
165 }
166
167 function watch_add(f) { // 增加
168 var oOption = new Option(f.word.value, f.word.value);
169 f.keywords[f.keywords.length] = oOption;
170 }
171 </script>
172
173 <!--整个实例的完整代码如下：-->
174
175 <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
176 <html>
177
178 <head>
179 <title>javascript select options text value</title>
180 <meta name="keywords" content="javascript select options text value add modify delete set">
181 <meta name="description" content="javascript select options text value add modify delete set">
182 <script language="javascript">
183 <!--
184 function watch_ini() { // 初始
185 for(var i = 0; i < arguments.length; i++) {
186 var oOption = new Option(arguments[i], arguments[i]);
187 document.getElementById("MySelect")[i] = oOption;
188 }
189 }
190
191 function watch_add(f) { // 增加
192 var oOption = new Option(f.word.value, f.word.value);
193 f.keywords[f.keywords.length] = oOption;
194 }
195
196 function watch_sel(f) { // 编辑
197 f.word.value = f.keywords[f.keywords.selectedIndex].text;
198 }
199
200 function watch_mod(f) { // 修改
201 f.keywords[f.keywords.selectedIndex].text = f.word.value;
202 }
203
204 function watch_del(f) { // 删除
205 f.keywords.remove(f.keywords.selectedIndex);
206 }
207
208 function watch_set(f) { // 保存
209 var set = "";
210 for(var i = 0; i < f.keywords.length; i++) {
211 set += f.keywords[i].text + ";";
212 }
213 confirm(set);
214 }
215 //-->
216 </script>
217 </head>
218
219 <body>
220 <form name="watch" method="post" action="">
221 <select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select><br>
222 <script language="javascript">
223 <!--
224 watch_ini("我", "你", "妳", "他", "她", "它", "尔"); // 初始关键词
225 //-->
226 </script>
227 <input type="text" name="word" /><br />
228 <input type="button" value="增加" onclick="watch_add(this.form);" />
229 <input type="button" value="修改" onclick="watch_mod(this.form);" />
230 <input type="button" value="删除" onclick="watch_del(this.form);" />
231 <input type="button" value="保存" onclick="watch_set(this.form);" />
232 </form>
233 </body>
234
235 </html>
236
237 <script>
238 //用一个字符串创建一个数组方法:
239 function spli() {
240 datastr = "2,2,3,5,6,6";
241 varstr = newArray();
242 str = datastr.split(",");
243 for(i = 0; i < str.length; i++) {
244 document.write(str[i] + "<br/>");
245 }
246 }
247 spli();
248 </script>
