博客园  :: 首页  :: 新随笔  :: 联系 :: 管理

javascript对select的操作

Posted on 2008-02-18 01:31  周末  阅读(656)  评论(0)    收藏  举报
 1<html>
 2
 3<head>
 4
 5<title></title>
 6<script language="javascript">
 7    function pageInit(){//定位到第二个选项
 8        
 9        var optionitems = document.getElementById("book");
10        
11        for(var i=0;i<optionitems.length;i++){
12            if(optionitems.options[i].value =="2"){
13                optionitems.options[i].selected = true;
14                
15            }
16              }
17    }
18    
19    //页面加载时候执行pageInit()函数，等同与body元素中的onload属性
20    window.onload =pageInit;
21    
22    //选项变更时，输出option的文本
23    function selectBook(){
24        var optionitems = document.getElementById("book");
25        
26        for(var i=0;i<optionitems.length;i++){
27            if(optionitems.options[i].selected){
28                alert(optionitems.options[i].text);
29                
30            }
31        }
32    }
33    
34    function addOption(){
35        var optionitems = document.getElementById("book");
36        //new Option(text,value);
37        optionitems.options[optionitems.length] = new Option("php","4");
38    }
39    
40    function delOption(){
41        var optionitems = document.getElementById("book");
42        //删除的时候，只需要option对象赋值为空即可
43        optionitems.options[0] = null;
44    }
45    
46    function clearOption(){
47        var optionitems = document.getElementById("book");
48        optionitems.length = 0;
49    }
50    
51</script>
52</head>
53
54<body>
55
56<select name="book" onchange="javascript:selectBook();">
57    <option value="1">java</option>
58    <option value="2">c++</option>
59    <option value="3">.net</option>
60</select>
61<input type="button" value="增加option" onclick="javascript:addOption();">
62<input type="button" value="删除option" onclick="javascript:delOption();">
63
64<input type="button" value="清空option" onclick="javascript:clearOption();">
65</body>
66
67</html> 
68
69