标签：
在网页编程中，我们通常会遇到要动态修改select和checkbox的情况，而一般来说这些内容在教程或书籍上并没有明确的记录。我通过实践总结了如下的经验。首先为了方便获取select和checkbox选择的值一般会使用同样的名字如下：
1 <select name = "test_select" id = "test_select"> 2 <option value = "1">1</option> 3 <option value = "2">2</option> 4 </select>
1 <input type="checkbox" name = "test_checkbox" value = "test1"/> test1 2 <input type="checkbox" name = "test_checkbox" value = "test2"/> test2 3 <input type="checkbox" name = "test_checkbox" value = "test3"/> test3
这样对于一系列checkbox就可以通过获取名字获得结果数组。下面我们会讲到。
有时候我们并不是一开始就知道所有的选项值，因此我们可以通过js动态添加选项。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>index.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 <script> 12 function init(){ 13 var sel = document.getElementById("test_select"); 14 sel.options.add(new Option ("haha","hehe")); 15 } 16 </script> 17 </head> 18 19 <body onload = "init()"> 20 This is my HTML page. <br> 21 <select id = "test_select"> 22 <option value = "select1">1</option> 23 <option value = "select2">2</option> 24 </select> 25 26 </body> 27 </html>
以上可以通过.option.add函数动态添加option。
下面为了避免冗余我们所说的代码特指onload函数的操作。
此外我们还可以通过直接添加DOM元素的方式来添加option，此处应该注意option的显示文字是由label属性控制的。这个方法比较适用在完全自动生成的页面，因为他的构造完全可以通过传入的参数界定。
1 <script> 2 function init(){ 3 var sel = document.getElementById("test_select"); 4 var test = document.createElement("option"); 5 test.setAttribute("value", "haha"); 6 test.setAttribute("label", "hehe"); 7 sel.appendChild(test); 8 } 9 </script>
删除option可以直接通过options的remove方法来移除option,但应该注意的是这个index是option的从上而下的位置,从0开始计算。
1 <script> 2 function init(){ 3 var sel = document.getElementById("test_select"); 4 var deleteindex = 1; //this is usually a parameter which is given by others. 5 sel.options.remove(deleteindex); 6 } 7 </script>
此外我们也可以通过DOM元素的方法removeChild删除，方法基本同上，只是注意参数是DOM node，而且其中有space子树，在取子树时应注意。
修改十分简单就是找到相应的option使用setAttribute方法设置即可。
大多数情况我们希望初始时select就是我们所希望看到的option被选中。这种情况我们需要
标签：
原文地址：http://www.cnblogs.com/fbcorz/p/3890543.html
