<HTML>
<HEAD>
<TITLE>选择下拉菜单</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Description" CONTENT="Power by hill">
</HEAD>
<BODY>
<p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p>
<form method="post" name="myform">
<table border="0" width="300">
<tr>
<td width="40%">
<select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="山东">山东</option>
<option value="安徽">安徽</option>
<option value="重庆">重庆</option>
<option value="福建">福建</option>
<option value="甘肃">甘肃</option>
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="贵州">贵州</option>
<option value="海南">海南</option>
<option value="河北">河北</option>
<option value="黑龙江">黑龙江</option>
</select>
</td>
<td width="20%" align="center">
<input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"><br/>
<br/>
<input type="button" value="删除" onclick="moveOption(document.myform.list2, document.myform.list1)">
</td>
<td width="40%">
<select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">
</select>
</td>
<td>
<button onclick="changepos(list2,-1)" type="button">上移</button>
<br/>
<button onclick="changepos(list2,1)" type="button">下移</button>
</td>
</tr>
</table>
值：<input type="text" name="city" size="40">
</form>
<script language="JavaScript">
<!--
function moveOption(e1, e2){
try{
for(var i=0;i<e1.options.length;i++){
if(e1.options[i].selected){
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
e1.remove(i);
i=i-1
}
}
document.myform.city.value=getvalue(document.myform.list2);
}
catch(e){}
}
function getvalue(geto){
var allvalue = "";
for(var i=0;i<geto.options.length;i++){
allvalue +=geto.options[i].value + ",";
}
return allvalue;
}
function changepos(obj,index)
{
if(index==-1){
if (obj.selectedIndex>0){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))
}
}
else if(index==1){
if (obj.selectedIndex<obj.options.length-1){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1))
}
}
}
//-->
</script>
</BODY>
</HTML>
用js实现 ，如用jquery 得再琢磨琢磨
分享到：
相关推荐
3. **SelectList.js**：这个文件很可能是核心的JavaScript代码，实现了列表框的选择和移动功能。其中可能包含了处理用户点击事件、在左右列表间移动项、同步选中状态等关键逻辑。 4. **ListItems.js**：这个文件...
列表框通常用于显示一系列可选择的项目，用户可以选择单个或多个项。在我们的场景中，列表框将用来显示设备列表。 2. **创建设备列表** 首先，你需要定义一个数据结构来存储设备信息，例如`struct DeviceInfo`，...
本文将深入探讨“jquery双向选择器两侧select框列表文字左右选择器代码”，这是一种常见于网页表单设计的功能，用于实现两个下拉列表（select框）之间的双向同步选择。 首先，我们需要理解jQuery的选择器。jQuery...
JavaScript 左右选择框是一种常见的前端交互设计，它通常用于让用户在两个独立的列表之间进行元素的选择和转移。这种设计模式在很多应用场景中都能见到，比如用户权限设置、多选选项配置等。在这个"Javascript左右...
标题“使用JQuery左右移动下拉列表框中的值”涉及的是在网页开发中利用JavaScript库JQuery来操作HTML的下拉列表（select元素），特别是实现选中项在两个并排的下拉列表之间动态移动的功能。这样的功能常见于用户需要...
在IT行业中，列表左右选择插件是一种常见的交互设计工具，特别是在数据管理和用户界面设计中，它为用户提供了一种高效、直观的方式来处理多个选项的选择。这种插件通常包含两个并排的列表，一个显示可供选择的项目，...
在这个"jQuery左右列表选项框代码.zip"压缩包中，包含了一个利用jQuery实现的交互式功能，即左右列表选项框。这种设计常用于用户在两个列表之间转移选项，例如在选择联系人或者分配权限时。以下是关于这个功能的详细...
反之，如果按下右箭头，从目标ListBox移除选中的项并添加回源ListBox。同时，当用户按住Ctrl键时，可以实现多选。 3. **多选**： 多选功能需要设置ListBox的`SelectionMode`属性为`MultiSimple`或`MultiExtended`...
在本篇教程中，我们将深入探讨如何利用jQuery库来实现一个功能丰富的下拉列表左右选择交互。jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得前端开发变得更加高效和便捷。本章节...
传统的多选列表通常由一个`<select>`元素组成，用户通过复选框来选择多个选项。然而，这个项目改进了这种模式，使得用户可以选择并将信息从左侧列表移动到右侧，从而创建了一个更直观的界面，方便用户进行信息筛选和...
"jQuery双列表左右选择框代码"是一个基于jQuery实现的交互式用户界面组件，通常用于数据筛选或配置场景，让用户可以从两个列表中选择元素。这种设计常见于多选项设置，如角色分配、权限管理或者属性筛选等。 这个...
在网页开发中，经常需要实现两个列表框（listbox）之间的数据交换功能，即从一个列表框中选择某些项并移动到另一个列表框中。本文将详细介绍如何使用JavaScript来实现这一功能，并通过实例来具体分析操作列表框的...
左右选择框是一种常见的交互设计元素，常用于网页和应用程序中，让用户在两个独立的列表之间进行选择、添加或删除项。这种设计模式尤其适用于需要用户从一组预定义的选项中挑选多个项目的情况，如选择组织架构、人员...
《jQuery穿梭框左右列表添加删除代码详解》 在网页开发中，我们经常需要实现一种交互效果，让用户能够方便地在两个列表之间移动元素，这种效果通常被称为“穿梭框”或“选择框”。jQuery库以其简洁易用的API，使得...
这种组件通常包含两个独立的列表，一个在左侧，一个在右侧，用户可以通过各种操作来选择、添加或移除元素。在这个场景下，"多选"、"全选"和"反向多选"是左右选择器的核心功能。 1. **多选功能**：多选意味着用户...
"multiselect2side.js" 是一个专门用于实现左右选择并交换内容的JavaScript库，它为用户提供了直观且高效的选择方式，广泛应用于诸如数据过滤、用户权限分配、多选项选择等场景。这个库包含了JavaScript代码、CSS...
"jQuery穿梭框列表按钮控制左右移动代码.zip"是一个典型的示例，它展示了如何利用jQuery实现一种被称为穿梭框（Transfer Box）的功能。穿梭框是一种常见的UI组件，通常用于在两个列表之间转移项目，常见于数据选择或...
在本文中，我们将深入探讨如何使用jQuery来实现左右两个列表框之间内容的相互移动功能。这个功能对于构建具有交互性的用户界面非常有用，比如在创建多选列表时，用户可以方便地在不同的分类之间移动选项。 首先，让...
这个插件使用户能够在两个并列的列表框之间方便地转移选择项，尤其适用于需要用户从多个选项中进行多选的场景。在响应式设计的背景下，它能确保在各种屏幕尺寸和触摸设备上的良好表现。 Bootstrap Dual Listbox的...