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>