html select 

<html>
<head>
<script text="text/javaScript">
    // 为Select控件添加Option选项
    function myAddAll(){
        var mySelect = document.getElementById("mySelect");
        var o1 = new Option("选项1","value1");
        var o2 = new Option("选项2","value2");
        var o3 = new Option("选项3","value3");
        mySelect.add(o1);
        mySelect.options.add(o2);
        mySelect.options[mySelect.options.length] = o3;
    }
    // 在Select控件指定位置插入Option选项
    function myAddOne(index){
        var mySelect = document.getElementById("mySelect");
        var o = new Option("插入选项位置2","位置2");
        mySelect.add(o, index);
    }
    // 删除Select控件所有选项
    function myDeleteAll(){
        var mySelect = document.getElementById("mySelect");
        mySelect.options.length = 0;
    }
    // 删除Select控件指定选项
    function myDeleteOne(index){
        var mySelect = document.getElementById("mySelect");
        alert(mySelect.options[index].text + " = " + mySelect.options[index].value);
        // 有以下3种方法,为防止运行时删除多条数据,前两种方法被注释掉
        // mySelect.remove(index);
        // mySelect.options.remove(index);
        mySelect.options[index] = null;
    }
</script>
</head>
<body>
    <select id="mySelect" onchange="alert(this.value)">
    </select>
    <input type="button" value="添加所有选项" onclick="myAddAll();"/>
    <input type="button" value="添加一个选项" onclick="myAddOne(1);"/>
    <input type="button" value="删除选项" onclick="myDeleteAll();"/>
    <input type="button" value="删除指定选项" onclick="myDeleteOne(1);"/>
</body>
</html>

 

posted @ 2015-07-20 15:19  蒲木杉  阅读(175)  评论(0)    收藏  举报