`
lcb530
  • 浏览: 55723 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

多选下拉框数据操作

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
	<script language="javascript">
		function leftMove(){
			var mailSelect1 = document.getElementById("mailSelect1");
			var mailSelect2 = document.getElementById("mailSelect2");

			for(var i=0;i<mailSelect2.options.length;i++){
				if(mailSelect2.options[i].selected){
					var opt = document.createElement("option");
					opt.value = mailSelect2.options[i].value;
					opt.text = mailSelect2.options[i].text;
					mailSelect1.add(opt);
					mailSelect2.options.removeChild(mailSelect2.options[i--]);
				}
			}
		}
		function leftMoveAll(){
			var mailSelect1 = document.getElementById("mailSelect1");
			var mailSelect2 = document.getElementById("mailSelect2");

			for(var i=0;i<mailSelect2.options.length;i++){
				var opt = document.createElement("option");
				opt.value = mailSelect2.options[i].value;
				opt.text = mailSelect2.options[i].text;
				mailSelect1.add(opt);
				mailSelect2.options.removeChild(mailSelect2.options[i--]);
			}
		}
		function rightMove(){
			var mailSelect1 = document.getElementById("mailSelect1");
			var mailSelect2 = document.getElementById("mailSelect2");

			for(var i=0;i<mailSelect1.options.length;i++){
				if(mailSelect1.options[i].selected){
					var opt = document.createElement("option");
					opt.value = mailSelect1.options[i].value;
					opt.text = mailSelect1.options[i].text;
					mailSelect2.add(opt);
					mailSelect1.options.removeChild(mailSelect1.options[i--]);
				}
			}
		}
		function rightMoveAll(){
			var mailSelect1 = document.getElementById("mailSelect1");
			var mailSelect2 = document.getElementById("mailSelect2");

			for(var i=0;i<mailSelect1.options.length;i++){
				var opt = document.createElement("option");
				opt.value = mailSelect1.options[i].value;
				opt.text = mailSelect1.options[i].text;
				mailSelect2.add(opt);
				mailSelect1.options.removeChild(mailSelect1.options[i--]);
			}
		}
	</script>
 <BODY>
	<center>
		<table>
			<tr>
				<td>
					<select name="mailSelect1" multiple>
						<option value="form1">form1</option>   
						<option value="form2">form2</option>   
						<option value="form3">form3</option>   
						<option value="form4">form4</option>   
					</select>
				</td>
				<td>
					<input type="button" value="<" onclick="leftMove()"/>
					<input type="button" value=">" onclick="rightMove()"/>
					<input type="button" value="<<" onclick="leftMoveAll()"/>
					<input type="button" value=">>" onclick="rightMoveAll()"/>
				</td>
				<td>
					<select name="mailSelect2" multiple>
					<option value="a">--a--</option>   
					<option value="b">--b--</option>   
					<option value="c">--c--</option>   
					<option value="d">--d--</option>   
				</select>
				</td>
			</tr>
		<table>
	</center>
  
 </BODY>
</HTML>

分享到:
评论

相关推荐

    ASP.NET多选下拉框自定义控件

    在实际项目中,将自定义的多选下拉框控件添加到页面上,配置数据源,然后进行单元测试和集成测试,确保其功能完整且无误。 综上所述,创建ASP.NET多选下拉框自定义控件是一个结合了服务器端编程、客户端脚本和Ajax...

    CheckBoxList_WinForm多选下拉框_下拉多选_

    以上就是实现一个WinForm的多选下拉框控件的基本步骤。通过这样的自定义控件,我们可以更灵活地满足用户在界面上的选择需求,同时保持了标准控件的易用性和兼容性。在实际项目中,还可以根据具体需求进行进一步的...

    jquery 多选下拉框实例

    1. **多选下拉框基础**: - 在HTML中,`&lt;select&gt;`元素通常用于创建单选的下拉列表,通过设置`&lt;select&gt;`的`multiple`属性,可以使其变为多选模式。例如: ```html &lt;option&gt;Option 1 &lt;option&gt;Option 2 ... `...

    java swing 多选下拉框 支持动态加载数据

    在Swing中,多选下拉框通常由JComboBox类实现,但默认的JComboBox只支持单选。为了实现多选功能,我们需要扩展JComboBox或者使用第三方库,如JList或JTable与弹出面板组合。 本主题涉及的知识点主要包括以下几个...

    C# 带checkbox的多选下拉框

    "带checkbox的多选下拉框"是一种常见的需求,它允许用户在下拉菜单中通过勾选复选框来选择多个选项。本知识点主要探讨如何在C#中实现这种控件,并将它应用到实际项目中。 首先,我们需要了解基本的Windows Forms...

    几种多选下拉框的代码

    EasyUI的多选下拉框(Combobox)可以方便地与服务器数据源集成,并支持异步加载选项。 总的来说,bootstrapSelect和EasyUI都提供了直观且易于使用的多选下拉框解决方案。它们各自具有不同的设计风格和使用方式,...

    select多选下拉框美化

    总之,"select多选下拉框美化"是一个涉及前端多个领域的任务,需要结合jQuery的动态操作和CSS的样式定制,通过创新的布局和交互设计,为用户提供更优质的使用体验。在实际应用中,开发者还需要根据项目需求和用户...

    各类多选下拉框代码1.zip

    多选下拉框则是允许用户同时选取多个选项的交互控件,它在数据筛选、配置设置等方面有着广泛的应用。本压缩包“各类多选下拉框代码1.zip”可能包含多种实现多选下拉框的代码示例,对于开发者来说,这些代码片段是...

    asp.net Dropdownlist结合CheckBoxList多选下拉框

    3. **结合使用**:为了实现多选下拉框的效果,我们可以使用Dropdownlist展示主要选项,然后在用户展开下拉列表时显示一个嵌入的CheckBoxList。当用户选择后,再将CheckBoxList中的选中项同步回Dropdownlist。 4. **...

    extjs多选 下拉框扩展

    ExtJS 是一个强大的JavaScript应用程序框架,用于构建交互式的Web...这个扩展可能包括了新的配置项、模板修改、事件处理、数据模型、方法以及行为调整等多个方面,使得在ExtJS应用中实现多选下拉框变得更加简单和便捷。

    layui-多选下拉框-xm-select-demo源码

    《layui-多选下拉框-xm-select:前端开发中的高效解决方案》 在现代Web开发中,用户界面的交互性和易用性是至关重要的。layui框架以其轻量级、高效和丰富的组件库,成为了众多开发者青睐的选择。尤其在构建多选...

    jQuery多选下拉框插件.rar

    在网页开发中,多选下拉框是一种常见的交互元素,用于提供用户多个可选项进行选择。本示例中,我们关注的是一个使用jQuery实现的多选下拉框插件,这个插件能够帮助开发者轻松地在项目中创建具有美观样式和易用功能的...

    QComboBox多选下拉框,可点击删除

    综上所述,实现一个`QComboBox`的多选下拉框并带有删除功能需要对Qt的模型-视图-控制器(MVC)架构、自定义控件、信号与槽机制有深入理解。通过上述步骤,我们可以构建出一个强大且易用的自定义组件,极大地增强了`...

    jquery 多选下拉框

    **jQuery 多选下拉框**是Web开发中一种常见的交互元素,用于提供用户可以选择多个选项的下拉菜单。在传统的HTML中,我们通常使用`&lt;select&gt;`元素创建下拉框,但仅限于单选。然而,通过结合使用jQuery库,我们可以实现...

    Element-ui中 选择器(select)多选下拉框实现全选功能.zip

    在这个特定的场景中,我们关注的是Element-UI中的选择器组件——`&lt;el-select&gt;`,特别是如何实现多选下拉框的全选功能。在实际应用中,全选功能常用于批量操作,如用户一次性勾选多个选项进行批量删除、导出等操作。 ...

    一款好用的多选下拉框

    在网页设计和开发中,多选下拉框是一种常见的用户界面元素,用于提供多个选项供用户同时选择。本文将深入探讨如何创建一个高效且实用的多选下拉框,包括其功能特性、实现方法以及优化策略。 首先,我们来看标题中的...

    ext-----多选下拉框

    6. **键盘操作**: 在多选下拉框中,用户可以通过键盘的`Ctrl`(或在Mac上`Command`)键来选择或取消选择多个项。EXT会自动处理这些键盘交互,但你可以通过覆盖默认行为来定制。 7. **数据绑定**: 如果你的应用使用...

    flex 多选下拉框

    多选下拉框在很多类型的Web应用中都有广泛的应用,例如数据过滤、用户设置和配置选项等。它提升了用户体验,让用户可以快速地做出多项选择,而不必反复打开和关闭单一选择的下拉菜单。 创建一个Flex中的多选下拉框...

    zTree实现多选下拉框

    在多选下拉框场景中,这些数据应包含必要的ID和文本信息,以及父节点关系。例如,`data = [{id:1, pId:0, name:"父节点"}, {id:2, pId:1, name:"子节点"}]`。 4. **事件监听与处理**:zTree提供了一系列的事件接口...

    WPF多选的下拉框

    4. **数据绑定**:DataTable是一种常用的轻量级数据结构,用于在WPF中存储和操作数据。要将DataTable中的数据绑定到CheckComboBox,我们可以设置ComboBox的`ItemsSource`属性为DataTable,然后通过`...

Global site tag (gtag.js) - Google Analytics