<!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：通过文本框向下拉列表中添加内容的更多相关文章

  1. 如何在select下拉列表中添加复选框?

    近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...

  2. 在C# 中 如何限制在文本框（textBox)中输入的类型为正整数

    在文本框的 KeyPress 事件中写下这些代码就可以保证是正整数了 private void textBox1_KeyPress(object sender, KeyPressEventArgs e ...

  3. 第三方文本框 在div中显示预览，让指定节点不受外部css影响

    例如,富文本框中 ol  li 但是我们往往全局样式时候会 让前面的数字不显示,但是富文本框时候,录入,我们需要显示,但是div中就不显示了 我们在预览页面中加上一个指定样式   然后后面 加上!im ...

  4. DOM（九）使用DOM设置文本框

    1.控制用户输入的字符个数 对于单行文本框和密码输入框,可以利用maxlength属性控制用户输入的字符个数. 对于多行文本,maxlength为自定义属性,其值最多输入的字符的个数,在onkeypr ...

  5. java 怎样向一个已存在的文件中添加内容

    如果想向某个文件最后添加内容,可使用FileWriter fw = new FileWriter("log.txt",true);在创建FileWriter时加个true就可以了. ...

  6. jquery 获取 json文件内容后，将其内容显示到 下拉列表框中，再将下拉列表中的内容，显示到文本框中

    <script type="text/javascript"> $(function(){ $("#huoqv").click(function() ...

  7. input文本框在div中居中

    {display:block;margin-left:auto;margin-right:auto;}

  8. 用JavaScript实现CheckBox的全选取消反选，及遮罩层中添加内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. shell 文件中添加内容

    下文所有 1111  ,  2222 均为字符串 sed -i '/1111/i\2222' a.txt   在a.txt中找到所有符合1111得 前面加上2222 sed -i '/1111/a\2 ...

随机推荐

  1. Linux 修改 .bashrc

    bashrc是一个隐藏的文件,要打开并修改该文件需要: (1)命令:ls -a 找到文件 .bashrc: (2) 命令 vim ~/.bashrc 进入到文件: (3) 直接按 i 键可以对文件进行 ...

  2. C++结构体struct与C语⾔结构体和C++引⽤&与传值的区别

    写再最前面:摘录于柳神的笔记: (1)定义好结构体 stu 之后,使⽤这个结构体类型的时候,C语⾔需要写关键字 struct ,⽽C++⾥⾯可以省 略不写: (2)这个引⽤符号 & 要和C语⾔ ...

  3. Python学习第十课——文件的基本操作

    文件基本操作 文件读操作 #读出路径下的测试.txt文件 f = open('测试.txt', encoding='utf-8') # 打开要读文件 data = f.read() # 读取内容 pr ...

  4. 第2节 Scala中面向对象编程：7、继承的概念以及override和super关键字；8、isInstanceOf 和 asInstanceOf关键字

    6.3.   Scala面向对象编程之继承 6.3.1.     Scala中继承(extends)的概念 Scala 中,让子类继承父类,与 Java 一样,也是使用 extends 关键字: 继承 ...

  5. day19-Python运维开发基础（类的魔术方法）

    1. __new__魔术方法 # ### __new__ 魔术方法 ''' 触发时机:实例化类生成对象的时候触发(触发时机在__init__之前) 功能:控制对象的创建过程 参数:至少一个cls接受当 ...

  6. bat批处理下如何像shell一样将命令执行的效果赋值给变量

    在bat下如何实现像shell一样,把执行命令行后的结果赋值给变量呐? 刚开始,可真难为到我了.随着对bat批处理知识熟悉的加深. 学习到了!!! 举个 栗子: svnlook  uuid  C:\R ...

  7. 使用mysql服务实现负载均衡

    mysql 长连接(tcp协议)模拟负载均衡 1.存在member,member的port与mysql服务port一致为3306 2.vip绑定浮动ip 3.开启mysql服务: #service m ...

  8. Python 基础之面向对象类的继承与多态

    一.继承 定义:一个类除了拥有自身的属性方法之外,还拥有另外一个类的属性和方法继承: 1.单继承 2.多继承子类: 一个类继承了另外一个类,那么这个类是子类(衍生类)父类:一个类继承了另外一个类,被继 ...

  9. MyBatis插入时获取自增长主键

    在某些场景下,我们需要使用mybatis返回生成的主键值.Mybatis在insert和update标签中就提供了这种功能. 方法1: <insert id=”indetifyId” useGe ...

  10. 【剑指Offer面试编程题】题目1372：最大子向量和--九度OJ

    题目描述: HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天JOBDU测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但 ...