<!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. hbase单机版安装

    hbase单机版安装 1.      hbase单机版安装 HBase的安装也有三种模式:单机模式.伪分布模式和完全分布式模式. hbase依赖于Hadoop和Zookeeper. 这里安装的是单机版 ...

  2. Send key模块发送按键

    filename:send_key.py 1 # Author:Bing # Date:07/19/2017 import SendKeys import win32gui import pywin ...

  3. Servlet 学习（七）

     ServletConfig 1.定义 ServletConfig接口:servlet容器在初始化期间将信息传递给servlet的servlet配置对象 代表当前Servlet在web.xml中的配置 ...

  4. 【转】Python中*args和**kwargs的区别

    一.*args的使用方法 *args 用来将参数打包成tuple给函数体调用 例子一: 输出结果以元组的形式展示 def function(*args): print(args, type(args) ...

  5. Java基础 -2.2

    整形数据 保存的范围由小到大:byte.short.int.long 在java中任何的一个整型常量 那么其默认的类型都是int型(只要是整数就是int类型的数据). public class ex1 ...

  6. Mate Linux 桌面的什么受GNOME 2 粉丝喜欢 ？

    导读 如果你以前听过这个传闻:当 GNOME3 第一次发布时,很多 GNOME 用户还没有准备好放弃 GNOME 2. Mate(以马黛茶yerba mate植物命名)项目的开始是为了延续 GNOME ...

  7. Manthan, Codefest 19 (open for everyone, rated, Div. 1 + Div. 2)D（树状数组）

    //树状数组中数组的特性,有更巧妙的方法.//我们知道在树状数组中,对于数组tree[i],它所维护的区间为[i−lowbit(i)+1,i]//所以对于tree[2^i],它所维护的区间就为[1,2 ...

  8. 利用Session实现三天免登陆

    什么是Session Session:在计算机中,尤其是在网络应用中,称为“会话控制”.(百度百科) Session:服务器端的数据存储技术. Session要解决什么问题 一个用户的不同请求(重定位 ...

  9. 设计模式课程 设计模式精讲 20-2 解释器模式coding

    1 代码演练 1.1 代码演练1(解释器模式coding) 1.2 代码演练如何应用了解释器模式 1 代码演练 1.1 代码演练1(解释器模式coding)(该案例运用了栈的先进先出的特性) 需求: ...

  10. mysql学习指令

    mysql 用户管理和权限设置 参考文章:http://www.cnblogs.com/fslnet/p/3143344.html Mysql命令大全 参考文章: http://www.cnblogs ...