`

两个多选列表中的值互移

JavaHTML 
阅读更多
1. html代码： 
<html>
<head>
<title></title>
<script src="option.js"></script>
<script>
  function checkForm(){
   
	var onRight=document.forms[0].rightItem;
	
	alert(onRight.options.length);
	
	for(var i=0;i<onRight.options.length;i++){
          var text=onRight.options[i].text;
          var value=onRight.options[i].value;
		  alert(value+" "+text);

	}
   
  }
</script>
</head>
<body>
<form name="form1" method="post" action="">
 <table border="0" align="center" width="75%" cellspacing="0" cellpadding="0">
   <tr>
     <td>
	   <table border="0" align="center">
	     <tr>
		   <td>
		     <select name="leftItem" style="width:200px" size="10" multiple="multiple">
			   <option value="1">item1</option>
			   <option value="2">item2</option>
			   <option value="3">item3</option>
			   <option value="4">item4</option>
			   <option value="5">item5</option>
			 </select>
		   </td>
		  </tr>
	   </table>
	 </td>
	 <td>
	   <table border="0"  align="center">
	     <tr><td height="30"><input type="button" name="button1" style="width:50px" value="&gt;" onClick="fMoveSelectedOptionsLeftToRight(document.all.leftItem,document.all.rightItem)"></td></tr>
		 <tr><td height="30"><input type="button" name="button2" style="width:50px" value="&gt;&gt;"
		 onClick="fMoveAllOptionsLeftToRight(document.all.leftItem,document.all.rightItem)"></td></tr>
		 <tr><td height="30"><input type="button" name="button3" style="width:50px" value="&lt;"
		 onClick="fMoveSelectedOptionsRightToLeft(document.all.leftItem,document.all.rightItem)"></td></tr>
		 <tr><td height="30"><input type="button" name="button4" style="width:50px" value="&lt;&lt;"
		  onClick="fMoveAllOptionsRightToLeft(document.all.leftItem,document.all.rightItem)"></td></tr>
	   </table>
	 </td>
	 <td>
	  <table border="0"  align="center">
	     <tr>
		   <td>
		     <select name="rightItem" style="width:200px" size="10" multiple="multiple">
			 </select>
		   </td>
		  </tr>
	   </table>
	 </td>
	</tr>
 </table>
 <table border="0" align="center">
   <tr height="40">
     <td><input type="button" value="保存" onClick="checkForm()"></td>
   </tr>
 </table>
</form>
</body>


2. js代码： 
/*移除左边选中的列表项到右边*/
function fMoveSelectedOptionsLeftToRight(oLeft,oRight)
{   
	if(!(oLeft&&oRight))
	{
		return;
	}
	if(!hasOptions(oLeft))
	{
		return;
	}
    if(oLeft.selectedIndex==-1)
	{
		oLeft.selectedIndex=0;
	}
	for(var i=0;i<oLeft.options.length;i++)
	{
		if(oLeft.options[i].selected)
		{    
			var oOption = document.createElement("OPTION");
			oOption.setAttribute("text",oLeft.options[i].text);
			oOption.setAttribute("value",oLeft.options[i].value);
			oRight.add(oOption);
		}
	}
	clearSelectedOptions(oLeft);
}

/*移除左边的所有列表项到右边*/
function fMoveAllOptionsLeftToRight(oLeft,oRight)
{
	if(!(oLeft&&oRight))
	{
		return;
	}
	if(!hasOptions(oLeft))
	{
		return;
	}
	for(var i=0;i<oLeft.options.length;i++)
	{
		var oOption = document.createElement("OPTION");
		oOption.setAttribute("text",oLeft.options[i].text);
		oOption.setAttribute("value",oLeft.options[i].value);
		oRight.add(oOption);
	}
	clearAllOptions(oLeft);
}

/*移除右边选中的列表项到左边*/
function fMoveSelectedOptionsRightToLeft(oLeft,oRight)
{
	if(!(oLeft&&oRight))
	{
		return;
	}
	if(!hasOptions(oRight))
	{
		return;
	}
	if(oRight.selectedIndex==-1)
	{
		oRight.selectedIndex=0;
	}
	for(var i=0;i<oRight.options.length;i++)
	{
		if(oRight.options[i].selected)
		{
			var oOption = document.createElement("OPTION");
			oOption.setAttribute("text",oRight.options[i].text);
			oOption.setAttribute("value",oRight.options[i].value);
			oLeft.add(oOption);
		}
	}
	clearSelectedOptions(oRight);
}

/*移除右边的所有列表项到左边*/
function fMoveAllOptionsRightToLeft(oLeft,oRight)
{
	if(!(oLeft&&oRight))
	{
		return;
	}
	if(!hasOptions(oRight))
	{
		return;
	}
	for(var i=0;i<oRight.options.length;i++)
	{
		var oOption = document.createElement("OPTION");
		oOption.setAttribute("text",oRight.options[i].text);
		oOption.setAttribute("value",oRight.options[i].value);
		oLeft.add(oOption);
	}
	clearAllOptions(oRight);
}

/*清空select所有options*/
function clearAllOptions(oSelect)
{
 	if(oSelect)
	{
	    var ops=oSelect.options;
	    while(ops.length>0)
	    {
	        oSelect.remove(ops.length-1);
	    }
	}    
}

/*清空select所有选中的options*/
function clearSelectedOptions(oSelect)
{
 	if(oSelect)
	{
	    for(var i=0;i<oSelect.options.length;i++)
		{
			if(oSelect.options[i].selected)
			{
				oSelect.remove(i--);
			}
		}
	}    
}

/*判断select是否有options*/
function hasOptions(oSelect)
{
	if(oSelect)
	{
		return oSelect.options.length>0;
	}
	return false;
}
分享到：
| struts2 工作原理图
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    MFC实现的多选的列表框ListBox

    本文以包含两个列表框的对话框为例，实现了对话框常用的功能。左边的“待选的历史人物”列表框包含历史人物的名字，当选中人名并单击“添加”按钮，则名字会被添加到右边的“你喜欢的历史人物”列表框，同时从左侧的...

    tkinter自定义多选下拉列表框（带滚动条，全选）

    2. **全选/全不选功能**：为了实现全选和全不选，我们需要在组件中添加两个按钮。当用户点击全选按钮时，所有列表项应被选中；点击全不选按钮时，所有列表项应被取消选中。这可以通过遍历列表项并设置它们的状态来...

    多列列表框单选和多选Demo,表格怎么选择多选和单选,LabView

    在LabVIEW中，这两个是与列表框相关的组件。单选按钮（Radio Button）允许用户在一组互斥的选项中选择一个；而多选按钮（Check Box）则允许用户选择一个或多个选项。在多列列表框中，单选模式意味着用户每次只能选择...

    C#重定义的下拉多选控件，支持显示多列、单选/多选，文件中附有源码

    只需将BaseComboBox.cs和ComboBoxItemControl.cs这两个类文件添加到项目中，然后在设计界面将控件拖放到合适的位置，设置相应的属性，如是否多选、是否显示表头等，并绑定数据源。对于DataTable，开发者可以自定义列...

    java treeview 多选和获取值

    在窗体级别上，定义两个变量： - `string tag`: 用来存储表示节点是否被选中的标记。通常情况下，我们可以使用 `"True"` 来表示节点被选中。 - `StringBuilder nodesTag`: 用来收集所有被选中节点的信息。 ##### 2....

    自定义的下拉框，搜索多选全选

    7. **全选/全不选功能**：可以创建两个按钮，分别绑定全选和全不选的槽函数。全选函数通过遍历模型中的所有项并调用`setSelected(true)`实现，全不选则相反。 8. **样式表（QSS）**：Qt支持使用CSS语法的样式表来...

    Android中使用ListView和CheckBox实现购物车多选功能

    - 添加两个按钮，一个用于全选，一个用于全不选。 - 全选按钮的点击事件中，遍历并设置所有CheckBox选中；全不选则反之。 - 需要同步更新选择状态数组，保持数据一致性。 6. **多选操作** - 用户选择多个...

    基于c#语言开发的下拉框多选功能

    在C#编程中，下拉框（DropdownList或ComboBox）多选功能的实现是一个常见的需求，特别是在构建用户界面时，用户可能需要从一系列选项中选择多个项目。在本篇文章中，我们将深入探讨如何利用C#语言来实现这个功能。 ...

    C# winform 开发的带多选的下拉控件 自适应屏幕

    "C# winform 开发的带多选的下拉控件 自适应屏幕"这个主题涉及了两个关键点：多选下拉控件和控件的自适应性。下面将详细解释这两个核心知识点。 1. 多选下拉控件： 在标准的Windows Forms控件中，ComboBox通常用于...

    PB9下拉多选自定义控件（源码）

    通过读取数据表生成一个可供多选的下拉列表控件，要求数据表中至少要有“编码”和“名称”两个字段，字段名任意。并且“编码”字段是主键，字符型或数字值都可以。 使用示例： uo_1.i_sqlselect='from demotab'//这...

    c# 下拉框多选实例

    这两个示例展示了如何通过自定义控件扩展C#的标准组件，以满足特定的多选和分类展示需求。在实际应用中，这些自定义控件可以被封装成独立的UI组件，方便在项目中重复使用。在提供的`CustomControls`和`...

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

    9. **代码示例**：在代码-behind文件中，设置Dropdownlist和CheckBoxList的属性，如Items、DataSource和DataTextField/DataValueField等，然后在事件处理程序中编写逻辑来同步两个控件的状态。 10. **CSS样式**：...

    支持多选的ComboBox下拉框控件源代码

    在.NET框架中，ComboBox是Windows Forms控件库中的一个常用组件，它通常用于展示一个下拉列表供用户选择。然而，标准的ComboBox控件只支持单选，即一次只能选择一个选项。但在某些应用场景中，我们需要用户能同时...

    安卓Android源码——实现列表多选的DEMO.zip

    在安卓开发中，实现列表多选功能是一项常见的需求，特别是在设计具有交互性的用户界面时。这个DEMO展示了如何在Android应用中实现一个可多选的列表视图(ListView)。以下将详细介绍相关知识点： 1. **ListView组件**...

    .net中实现多选下拉菜单（很容易学懂）

    在提供的压缩包文件"dropDownList"中，应该包含了一个演示如何实现多选下拉菜单的示例项目。打开后，你可以看到一个简单的ASP.NET Web Forms应用，其中包含了上述两种方法的实现。运行项目，查看效果，并研究源代码...

    重写TreeView按住Shift、ctrl多选

    用户交互体验是程序设计的重要部分，特别是在选择多个节点时，提供类似于文件管理器中的Shift和Ctrl键多选功能可以极大地提升用户体验。本文将详细讲解如何在TreeView控件中实现按住Shift和Ctrl键进行多选的功能。 ...

    ios-UItableViewCell自定义多选的cell.zip

    UITableView由两个主要部分组成：数据源（dataSource）和委托（delegate）。数据源负责提供单元格的内容，而委托则处理与用户交互相关的事件，比如单元格被选中或取消选中。在实现多选功能时，我们需要关注的是`...

    CheckBox实现多选、全选、反选功能

    // 假设items是你的数据列表，每个条目包含一个表示选中状态的布尔值 listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView&lt;?&gt; parent, View...

    asp.net中实现多选按钮的全选

    在ASP.NET中实现多选按钮的全选功能是常见的需求之一，尤其是在处理表格或列表的用户界面时。本文将深入探讨如何在ASP.NET中的GridView控件内实现这一功能，包括服务器端和客户端（JavaScript）两种方法。 ### 一、...

    multiselect 左右多选精简例子

    例如，可能会有浮动、宽度、边距等CSS属性的设置，以确保左右两个多选框并排放置且间距合适。 JS（JavaScript）文件是这个例子的另一个关键部分。它可能包含了处理用户交互逻辑的函数，比如当用户在某个多选框中...

Magicbox
Global site tag (gtag.js) - Google Analytics