HTML组合框添加元素与删除元素

最新推荐文章于 2021-11-10 11:46:02 发布
最新推荐文章于 2021-11-10 11:46:02 发布
阅读量1.5k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16259463/article/details/50738260
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>组合框</title>
<script type="text/javascript" language="javascript">
window.οnlοad=function(){
	var oTxt = document.getElementById("txt");
	var oBtn = document.getElementById("btn");
	var oBtnFirst = document.getElementById("btn_first");
	var oBtnClear = document.getElementById("btn_clear");
	var oBox = document.getElementById("box");
	oBtnFirst.οnclick=function(){//插在首位
		var oOption = document.createElement("option");
		oOption.value=oTxt.value;
		oOption.innerHTML=oTxt.value;
		oBox.insertBefore(oOption,oBox.getElementsByTagName("option")[0]);//插在第一位的前面
		oBox.selectedIndex=0;//选中第一个
		oTxt.value="";//重置文本框
	}
	oBtn.οnclick=function(){//插在末尾
		var oOption = document.createElement("option");//创建option元素
		oOption.value=oTxt.value;
		oOption.innerHTML=oTxt.value;
		oBox.appendChild(oOption);//向下拉列表框添加这个子元素
		oBox.selectedIndex=oBox.getElementsByTagName("option").length-1;//选中刚刚添加的最后一个元素
		oTxt.value="";//重置文本框
	}
	oBtnClear.οnclick=function(){
		var aOption = oBox.getElementsByTagName("option");
		for(var i = aOption.length-1;i>=0;i--){//遍历每一个选项并移除，必须倒序遍历，否则每次只能删除一半
			oBox.removeChild(aOption[i]);
		}
	}
}
</script>
</head>

<body>
<input type="text" id="txt" />
<input type="button" value="插在首位" id="btn_first" />
<input type="button" value="插在末尾" id="btn" />
<input type="button" value="全部删除" id="btn_clear" /><br />
<select id="box">
 <option value="江苏">江苏</option>
 <option value="河北">河北</option>
</select>
</body>
</html>


可通过AJAX请求数据添加到组合框中

疯雪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
EDA/PLD中的LabVIEW的组合框
11-16
组合框控件用来创建一个字符串列表，在前面板上可以按次序循环浏览该列表。组合框控件类似于文本型或菜单型下拉列表框，不同的是组合框控件是字符串类型的数据，而菜单型下拉列表框是数值类型的数据。 　　右键单击组合框控件，在弹出的快捷菜单中选择“编辑项...”进入字符串编辑对话框，或选择“属性→编辑项”选项卡，如图8－8所示。勾选复选框“值与项值匹配”表示值与项一致，项确定以后不能修改值。单击右侧“Insert”按钮添加项，单击“删除”按钮删除选中的项，单击“上移”或“下移”按钮用来上移或下移选中项在控件中显示的位置。勾选复选框“允许在运行时有未定义值”表示可以有没有赋值的项存在。 　　图1 组
html 下的列表框和组合框
laozhong_sz的博客
12-06 2347
<html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> //加上 size 属性，combox...
html 选择列表框,列表框和组合框的区别是什么？
weixin_42395213的博客
06-03 1895
列表框和组合框的区别1、自动排序方式不同：当列表框不能同时显示所有项目的时候，将自动添加滚动条，使用户可以滚动查阅所有选项。组合框的风格取值定义了组合框的具体属性，包括是否自动排序，是否有滚动条。2、项目输入方式不同：列表框是显示一系列项供用户选择的控件，对选中的项可以进行后续的处理。用户选择可以是多项的。组合框是一个编辑框带一个可以下拉的列表框，用户在下拉框中选择的项会进入编辑框中，再进行后续处...
LabVIEW表格控件插入组合框
weixin_42321076的博客
04-17 2909
LabVIEW表格控件插入组合框1.实现思路1）场景2)思路2.实现 1.实现思路 1）场景 在数据库应用中，通产会用表格控件来显示查询结果，同时允许用户在上面修改一部分数据；那么有是所要修的数据可能是固定的字符串或者值，如若通过可选项来实现键入，将会一定程度上方便用户的输入，同时也会减少出错的概率。 2)思路 假定设计到的有某一列 组合框编辑好选项； 隐藏组合框； 获取点击的行号、位置和组合框的长、宽； 调整表格的长和宽使得与各自相合； 组合框值改变时将字符串填充到表格相应的位置。 2.实现 前面板 点
html-jquery列表添加删除操作
暴风雨的博客
01-07 3302
function aa() { var name = $("#name").val(); var sex = $("#sex option:selected").text(); var date = $("#date").val(); var pro = $("#pro option:selected").text(); var city = $("#city option:select
jQuery添加删除表单元素代码.zip
最新发布
11-22
在“jQuery添加删除表单元素代码.zip”这个压缩包中，我们可以期待找到有关如何使用jQuery来动态地添加或删除HTML表单元素的示例代码。这在构建交互性强、用户友好的网页时非常实用。 首先，让我们了解如何在jQuery...
好看的下拉框.zip_组合框控件_HTML__组合框控件_HTML_
08-09
在网页设计中，"组合框控件"，也常被称为"下拉列表"或"选择框"，是用户界面中的一个重要元素，它允许用户从预设的一系列选项中进行选择。在HTML中，这种控件通常由`<select>`标签创建，而具体的选项则由`<option>`...
HTML元素大全
06-23
23. `<custom>`：自定义元素，非标准HTML元素，可能与Web组件技术有关。 24. `<dataTransfer>`：在拖放操作中用于处理剪贴板数据。 25. `<dd>`：定义列表中定义部分的开始。 26. `<del>`：表示已从文档中删除的文本...
pwozg.zip_组合框控件_Visual_C++_
08-10
组合框控件是Windows应用程序开发中常见的一种交互元素，它允许用户从预定义的选项列表中选择一个条目，或者在某些情况下，允许用户输入自定义文本。 描述中的“一个编程的界面代码”提示我们这个压缩包可能包含了...
HTML元素参考手册
05-31
HTML（HyperText Markup Language）是用于创建网页的标准标记语言...这些元素构成了HTML的基本结构，通过它们的组合和样式化，可以构建出丰富多彩的网页内容。理解并熟练掌握这些元素的使用，是网页设计和开发的基础。
一个待办事项列表界面（可添加删除）
12-18
一个待办事项列表界面（可添加删除）
一款可以下拉搜索html下拉框控件
angou6476的博客
08-05 1346
直接上图，组件不错，支持静态和动态搜索，这个只是在原控件上自己修改样式后的，这里主要记录一下，在修改别人控件时，应该如何去封装代码； 原控件：http://ivaynberg.github.com/select2 效果图： 源文件：（链接: https://pan.baidu.com/s/1bpiwTLd 密码: x8ky） 转载于:https://www.cnblog...
正确的写法：组合框
weixin_40945354的博客
11-10 1145
<!DOCTYPE html> <html> <div id="app"> <my-input label="请选择了解信息的渠道" :list="['报纸', '网络', '朋友介绍']" v-model="selectedVal"> </my-input> <span>选中的值是： {{ selectedVal }}</span> </div> <script src="ht
html添加组合框,vb.net – 如何为组合框项添加值
weixin_28698233的博客
06-23 247
如果你想使用SelectedValue,那么你的组合框必须是数据绑定的.要设置组合框：ComboBox1.DataSource = GetMailItems()ComboBox1.DisplayMember = "Name"ComboBox1.ValueMember = "ID"要获取数据：Function GetMailItems() As List(Of MailItem)Dim mailIt...
html组合选择器代码,css选择器设置标签样式的实例代码
weixin_35443436的博客
06-03 361
css选择器在html标签上设置style可以给标签设置属性：啊啊啊我们还可以通过标签里设置选择器，这样每种样式只需要写一遍Title具体的选择器有很多种：1、通过id来复制样式#i1{background-color: #2459a2;height: 48px;}在body里的标签这样用：但id不能写多个，所以还是不能多用2、通过class来复制：/*class选择器：用class=c1来就可以...
HTML文本框添加和删除
Wangmengyao1115的博客
11-05 2278
test6 var x = 4; //给按钮添加点击事件 function add(){ //添加输入框 //1.创建输入框 var input = document.createElement("input"); //2.给输入框添加属性 input.value = "输入框" + x; x++; //3.将输入框放入指定位置（最后面） var center = doc
输入部件组（Input Widgets）
雨中山草
06-08 725
 Combo Box：组合框。  Font Combo Box：字体组合框。  Line Edit：行编辑。  Text Edit：文本编辑。  Plain Text Edit：纯文本编辑。  Spin Box：数字显示框（自旋盒）。  Double Spin Box：双自旋盒。  Time Edit：时间编辑。  Date Edit：日期编辑。  Date/T
关于组合框(可选可输入)的心得
weixin_45132984的博客
01-07 505
关于组合框(可选可输入)的使用心得 问题是这样的用户需求要可选可输入的input框,通过判断输入为新的项目(id为空,新的项目名称),而选择则为已有的项目(已有id,已有的项目名称). 我用的是java模板引擎方式来写前端页面: HTML代码 <label class="col-sm-2 control-label"><span style="co...
组合框
huangxy10的专栏
05-23 2367
组合框控件显示一个字符串在下拉菜单式的列表。提供一种方法来显示多个选项，同时节省空间，组合框结合了列表框和编辑框的功能。组合框控件的功能被封装在Microsoft基础类库CComboBox类。本教程演示了这个类的一些常用功能。  如何获取列表中的选项：（Ctrl+Enter换行添加多个选项） 1.添加控件； 2.为控件添加CComboBox 类型的变量m_Combox; 3.添加CBN_S
掌握HTML文字与段落格式：网页设计基础教程
此外，课程目标还包括理解表单、层、框架等高级元素，以及CSS（Cascading Style Sheets）的运用，CSS允许开发者更精细地控制网页的样式和布局，与HTML协同工作，提升网页的视觉效果。 在编写HTML文档时，有三种常见...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值