7.DOM对列表下拉框元素的增删改操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>列表框,下拉菜单的增删改操作</title>
    <script type="text/javascript">
        function createSelect(){
            //创建
            var  select = document.createElement("select");
            select.id = "city";
            var body = document.getElementById("test");
            body.appendChild(select);
            //创建五个option
            for(var i=1;i<5;i++){
                var opt = new Option("值"+i,"value"+i);
                select.options[i] = opt;
            }
        }
        function delone(){

        }
        function clearAll(){
            //只要把options的长度改为0就可以的
            var city = document.getElementById("city");
            city.options.length = 0;
        }
    </script>
</head>
<body id="test">

<input type="button" value="创建一个城市列表框" onclick="createSelect()"/>
<input type="button" value="一条条删除列表框内容" onclick="delone()"/>
<input type="button" value="一次性清空列表框内容" onclick="clearAll()"/>

</body>
</html>

  

posted @ 2017-02-17 18:54  john。  阅读(507)  评论(0编辑  收藏  举报