在網頁編程中，我們通常會遇到要動態修改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就可以通過獲取名字獲得結果數組。下面我們會講到。
1.select
1.1動態添加option
有時候我們並不是一開始就知道所有的選項值，因此我們可以通過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>
1.2動態刪除option
刪除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子樹，在取子樹時應注意。
1.3動態修改option
修改十分簡單就是找到相應的option使用setAttribute方法設置即可。
1.4初始化被選擇的值
大多數情況我們希望初始時select就是我們所希望看到的option被選中。這種情況我們需要