码迷,mamicode.com
首页 > 其他好文 > 详细

DOM:通过文本框向下拉列表中添加内容

时间:2017-10-11 11:08:19      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:multiple   val   rip   htm   on()   width   tle   doc   innertext   

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            select {
                width: 200px;
            }
        </style>
    </head>

    <body>
        <select id="s1" multiple="multiple" size="7"></select>
        <input type="text" id="txt" />
        <input type="button" id="btn" value="添加" />
        <input type="button" id="btn_del" value="删除" />
    </body>

</html>
<script>
    var s1 = document.getElementById("s1");
    var txt = document.getElementById("txt");
    var btn = document.getElementById("btn");
    var btn_del = document.getElementById("btn_del");

    btn.onclick = function() {
        if(txt.value.trim() != "") {
            var temp_opt = document.createElement(‘option‘);
            temp_opt.innerText = txt.value;
            s1.appendChild(temp_opt);
            txt.value = "";
        }
    }
    
    btn_del.onclick = function(){
        var x = s1.selectedOptions[0];
        s1.removeChild(x);
    }
</script>

DOM:通过文本框向下拉列表中添加内容

标签:multiple   val   rip   htm   on()   width   tle   doc   innertext   

原文地址:http://www.cnblogs.com/cmzhphp2017/p/7648717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!