DOM:通过文本框向下拉列表中添加内容
<!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:通过文本框向下拉列表中添加内容的更多相关文章
- 如何在select下拉列表中添加复选框?
近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...
- 在C# 中 如何限制在文本框(textBox)中输入的类型为正整数
在文本框的 KeyPress 事件中写下这些代码就可以保证是正整数了 private void textBox1_KeyPress(object sender, KeyPressEventArgs e ...
- 第三方文本框 在div中显示预览,让指定节点不受外部css影响
例如,富文本框中 ol li 但是我们往往全局样式时候会 让前面的数字不显示,但是富文本框时候,录入,我们需要显示,但是div中就不显示了 我们在预览页面中加上一个指定样式 然后后面 加上!im ...
- DOM(九)使用DOM设置文本框
1.控制用户输入的字符个数 对于单行文本框和密码输入框,可以利用maxlength属性控制用户输入的字符个数. 对于多行文本,maxlength为自定义属性,其值最多输入的字符的个数,在onkeypr ...
- java 怎样向一个已存在的文件中添加内容
如果想向某个文件最后添加内容,可使用FileWriter fw = new FileWriter("log.txt",true);在创建FileWriter时加个true就可以了. ...
- jquery 获取 json文件内容后,将其内容显示到 下拉列表框中,再将下拉列表中的内容,显示到文本框中
<script type="text/javascript"> $(function(){ $("#huoqv").click(function() ...
- input文本框在div中居中
{display:block;margin-left:auto;margin-right:auto;}
- 用JavaScript实现CheckBox的全选取消反选,及遮罩层中添加内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- shell 文件中添加内容
下文所有 1111 , 2222 均为字符串 sed -i '/1111/i\2222' a.txt 在a.txt中找到所有符合1111得 前面加上2222 sed -i '/1111/a\2 ...
随机推荐
- PAT T1010 Lehmer Code
跟1009几乎是同一道题~ #include<bits/stdc++.h> using namespace std; ; int a[maxn]; ]; int r[maxn]; int ...
- KVM的客户机可以使用的存储
KVM的虚拟机可以直接使用宿主机器内的存储设备,比如可以把宿主机器内的硬盘直接暴露给 虚拟机挂载使用 -hda /dev/sfa(宿主机的设备文件) 还可以把镜像文件挂接到虚拟机,作为虚拟机的存储设备 ...
- 跳转连接转base64
//配置H5连接 @Value("${h5.domain}") private String h5Domain; // 校验商家端权限 public String checkSta ...
- 学习java时在要求输出的数字带俩个小数点时,利用String.format时出现的问题
public class StringFormatDemo { public static void main(String[] args) { //String.format 实现了四舍五入 Sys ...
- spring mvc绑定参数之 类型转换 有三种方式:
spring mvc绑定参数之类型转换有三种方式: 1.实体类中加日期格式化注解(上次做项目使用的这种.简单,但有缺点,是一种局部的处理方式,只能在本实体类中使用.方法三是全局的.) @DateTim ...
- Maven项目-端口被占用java.net.BindException: Address already in use: JVM_Bind <null>:8080解决方法
异常显示: 问题所在:之前启动的tomcat未停止,端口被占用. 解决方法: 养成良好的习惯,用完之后停掉服务.
- js 表格操作----添加删除
js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...
- express框架安装及中间件原理
本文主要介绍express中间件的原理,来应对面试. 1.安装express及初始化: npm install express-generator -g => express expre ...
- SpringTest
Spring Test 1.对junit的一个扩展 必须先导入junit jar包 2.简化获取bean的步骤 它的底层也是IOC容器 3.IOC的全部 junit的全部 junit的版本必须是 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...