利用下拉框的方法进行txt列表中内容的左右切换

利用下拉框的方法实现两个txt列表内内容的左右切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>

		<select id="left" size="10" multiple="multiple" style="width: 150px;">
			<option >123</option>
			<option >234</option>
			<option >345</option>
			<option >456</option>
			<option >567</option>
		</select>

		<input type="button" id="btn1" value="向右" />
		<input type="button" id="btn2" value="向左" />

		<select id="right" size="10" multiple="multiple" style="width: 150px;">
			<option >789</option>
			<option >890</option>
			<option >901</option>
			<option >902</option>
			<option >903</option>
		</select>

	</body>
</html>
<script>
	var left = document.getElementById(‘left‘);
	var right = document.getElementById(‘right‘);

	document.getElementById(‘btn1‘).onclick = function(){
				for(var i =0;i<left.selectedOptions.length;){
					right.appendChild(left.selectedOptions[i]);

				}

	}
	document.getElementById(‘btn2‘).onclick = function(){
				for(var i =0;i<right.selectedOptions.length;){
					left.appendChild(right.selectedOptions[i]);

				}
	}
</script>
时间: 2024-08-01 18:27:36

利用下拉框的方法进行txt列表中内容的左右切换的相关文章

IE6浏览器下div无法遮盖select下拉框解决方法

IE6浏览器下div无法遮盖select下拉框解决方法:在IE6浏览器下,select下拉框无法被div遮盖,其他的主流浏览器都是正常的.这里简单介绍一下如何解决此问题.默认状态下IE6的表现: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn

下拉框联动方法封装

业务中经常需要对数据进行下拉框的联动选择操作,可以假设成省份城市 省份城市县这样的多级联动 客户那边提供的数据大多为excel,格式都属于标准一行列的 假设需要对省份城市进行联动 实现如下 1 var pcd = []; 2 pcd[0] = ['北京', '北京']; 3 pcd[1] = ['天津', '天津']; 4 pcd[2] = ['河北', '石家庄']; 5 pcd[3] = ['河北', '唐山']; 6 pcd[4] = ['山西', '太原']; 7 pcd[5] = ['

bootstrap中selectpicker下拉框使用方法实例

最近一直在用bootstrap 的一些东西,写几篇博客记录下.... bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件,先看效果如下: 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 下拉框的使用上基本操作一般是:单选.多选.模糊搜索.动态赋值等,下面来看如何使用: 使用方法如下 1.首先需要引入的css和js: bootstrap.css    bootstrap-select.m

ASP.NET 绑定的下拉框等方法(RadioButtonList1,DropDownList1...等单选列表,下拉列表同理调整属性即可)

一.效果很简单几个属性与Winfrom 几乎相同 Winfrom: cobbox.DisplayMembe=“显示值” cobbox.ValueMember=”绑定值ID” 1.死绑:Winfrom几个属性一个一个添加 public void BindCob() { cmbSex.Items.Add("---请选择----"); cmbSex.Items.Add("男"); cmbSex.Items.Add("女"); cmbSex.Text =

Select-or-Die演示11种美化下拉框select方法

在线预览 下载地址 在线实例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <div class="main">             <div class="mianc">                 <h1>默认</h1>                 &l

InstallShield Limited Edition for Visual Studio 国内注册时国家无下拉框解决方法

注册地址:http://learn.flexerasoftware.com/content/IS-EVAL-InstallShield-Limited-Edition-Visual-Studio 火狐打开网址后,按F12打开调试工具:输入以下内容,回车 var div=document.getElementById("cCountry"); var span=document.createElement("option"); span.value="Chi

利用js取到下拉框中选择的值

现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </summary> public enum AdministratorRole { [Display(Name = "平台管理员")] PlatformAdministrator = 1, [Display(Name = "加盟商")] JoiningTrader

左右两个下拉框里的内容互换

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select id="left_slt" size="7" multiple="multiple" style="width: 150px;&quo

DevExpress gridview下拉框repositoryItemComboBox的使用

本以为DevExpress gridview中的下拉框会像比原来的datatgridview中的下拉框绑定数据简单好用,没想到费了老大劲,查阅各种资料总算是绑定上了数据,并且能够实现想要的效果.下面就详细写一下这个实现的过程,分享一下,同时也是对这个知识再次熟悉一遍. 一.绑定前准备 这一部分基本上是一些基础的知识,但也有些地方要注意的. 1.添加下拉框列 在Grid Designer中,添加一列,在这列的ColumnEdit熟悉中,可以选择这列的编辑样式,比如让这列是一个按钮或者选择框等等,这