博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DOM:通过文本框向下拉列表中添加内容
阅读量:5128 次
发布时间:2019-06-13

本文共 832 字,大约阅读时间需要 2 分钟。

<!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>

转载于:https://www.cnblogs.com/cmzhphp2017/p/7648717.html

你可能感兴趣的文章
你的第一个Django程序
查看>>
grafana授权公司内部邮箱登录 ldap配置
查看>>
treegrid.bootstrap使用说明
查看>>
[Docker]Docker拉取,上传镜像到Harbor仓库
查看>>
javascript 浏览器类型检测
查看>>
nginx 不带www到www域名的重定向
查看>>
记录:Android中StackOverflow的问题
查看>>
导航,头部,CSS基础
查看>>
[草稿]挂载新硬盘
查看>>
[USACO 2017 Feb Gold] Tutorial
查看>>
关于mysql中GROUP_CONCAT函数的使用
查看>>
OD使用教程20 - 调试篇20
查看>>
Java虚拟机(JVM)默认字符集详解
查看>>
Java Servlet 过滤器与 springmvc 拦截器的区别?
查看>>
(tmp >> 8) & 0xff;
查看>>
linux命令之ifconfig详细解释
查看>>
NAT地址转换
查看>>
Nhibernate 过长的字符串报错 dehydration property
查看>>
Deque - leetcode 【双端队列】
查看>>
人物角色群体攻击判定(一)
查看>>