<!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. 编写自己的JDBC框架

    目的 简化代码,提高开发效率 设计模式 策略设计模式 代码 #连接设置 driverClassName=com.mysql.jdbc.Driver url=jdbc:mysql://localhost ...

  2. Java基础 -4.2

    Switch分支语句 switch是一个开关语句,它主要是根据内容来进行判断的,需要注意的是switch中可以判断的只能够是数据(int.char.枚举.String)而不能够使用逻辑判断 publi ...

  3. Laravel 验证 教程

    英文源文章: https://www.techiediaries.com/laravel-authentication-tutorial/ 在上一篇教程中,我们已经接触过Laravel,同时介绍了最新 ...

  4. HDU 5564：Clarke and digits 收获颇多的矩阵快速幂 + 前缀和

    Clarke and digits  Accepts: 16  Submissions: 29  Time Limit: 5000/3000 MS (Java/Others)  Memory Limi ...

  5. 调用百度汇率api 获取各国的汇率值

    设置一个定时任务,每天更新汇率java代码如下 package com.thinkgem.jeesite.modules.huiLvApi.service; import java.io.Buffer ...

  6. 按钮UIButton的使用

    一.使用概要 当添加一个按钮到你的界面,执行以下步骤: 1.在创建时设置按钮的类型. 2.提供一个标题字符串或图像,为您的内容适当调整按钮的大小. 3.连接一个或多个操作按钮的方法. 4.设置自动布局 ...

  7. 回文串[APIO2014](回文树)

    题目描述 给你一个由小写拉丁字母组成的字符串 s.我们定义 s 的一个子串的存在值为这个子串在 s中出现的次数乘以这个子串的长度.对于给你的这个字符串 s,求所有回文子串中的最大存在值. 输入格式 一 ...

  8. 多个span标签在同一行显示

    属性设置为display:inline或display:inline-block

  9. javaScript中this的指向？

    javaScript中this对象是在运行时基于函数的执行环境绑定的,在全局函数中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象. 但在实际中,代码环境复杂,th ...

  10. java并发初探CountDownLatch

    java并发初探CountDownLatch CountDownLatch是同步工具类能够允许一个或者多个线程等待直到其他线程完成操作. 当前前程A调用CountDownLatch的await方法进入 ...