使用JS添加删除select选项

keisunique

于 2017-07-11 19:02:29 发布

阅读量2.7k

点赞数

分类专栏： HTML/CSS/JS 文章标签： javascript

本文链接：https://blog.csdn.net/qq_32475739/article/details/74992602

版权

HTML/CSS/JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、步骤

1.获得文本框的值

    var text = document.getElementById("op").value;

2.创建选项对象

    var op = new Option(text);

3.添加选项

    show.options[show.options.length] = op;

二、代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">

            var add = function(){
                var show = document.getElementById("show")
                var op = new Option(document.getElementById("op").value);
                show.options[show.options.length] = op;
            }
            var del = function(){
                var show = document.getElementById("show")
                if(show.options.length>0){
                    show.remove(show.options.length-1);
                }
            }
        </script>
    </head>
    <body>
        <input id = "op" type="text" />

        <input type="button" value="增加" onclick="add()"/>
        <input type="button" value="删除" onclick="del()"/><br/>

        <select id="show" size="8" style="width: 120px;"></select>


    </body>
</html>