<html>
<head>
<title>左右选择添加、删除菜单内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。<br>
<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>
</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>
</tr>
</table>
</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;
}
//-->
</script>
</body>
</html>
分享到：
相关推荐
在这个"Javascript左右选择框"的教程中，我们将深入探讨其背后的实现原理和相关技术。 首先，我们要理解这个经典Demo的基本结构。一个基本的左右选择框由两部分组成：左侧的可选列表和右侧的已选列表。`index.html`...
在JavaScript编程中，创建具有左右两个下拉选择框并实现左右上下移动功能是一个常见的交互设计。这个功能常常用于用户在两个列表之间转移选项，比如在“可用”和“已选”之间切换。以下是对这个主题的详细解释： ...
"jQuery 左右选择框"通常指的是使用jQuery实现的一种交互式选择组件，这种组件常用于用户界面，允许用户在两个分隔的区域之间移动选项，以进行多选或排序操作。下面我们将深入探讨这一主题。 首先，我们来理解...
"multiselect2side.js" 是一个专门用于实现左右选择并交换内容的JavaScript库，它为用户提供了直观且高效的选择方式，广泛应用于诸如数据过滤、用户权限分配、多选项选择等场景。这个库包含了JavaScript代码、CSS...
### JavaScript 实现的...通过以上详细介绍，我们可以看到，利用JavaScript实现左右选择框不仅能够极大地增强网页的互动性和用户体验，还能在实际开发中发挥重要作用。希望本文能帮助读者更好地理解和掌握这一知识点。
本项目"基于zTree-MultiSelect实现的左右选择框Demo"是针对zTree进行的一个功能扩展，旨在提供多选和左右移动功能，以满足更复杂的用户交互需求。 zTree的核心功能是将层级结构的数据转换为树形结构显示，其强大的...
根据提供的文件信息，本文将详细解析“jquery左右选择框”的实现原理、代码结构及功能特点。此案例展示了如何使用jQuery库来实现一个简单的左右选择框交互功能，这在实际项目中非常常见，例如用户权限分配、多选项...
6. **CSS样式**：为了实现左右选择框的布局和美观，开发者通常会结合使用CSS来定义元素的样式。这可能包括浮动布局、宽度设置、背景颜色、边框等。 7. **HTML结构**：一个基本的实现可能包含两个`<ul>`列表（分别...
开发者可能使用了内联样式、内部样式表或外部样式表来定义元素的布局、颜色、边框等视觉属性，使得左右选择框看起来更加吸引人。 7. **响应式设计**：考虑到现代网页需要适应不同设备的屏幕尺寸，此组件可能采用了...
在本案例中，我们讨论的是一个基于jQuery实现的左右选择框，它提供了增、删和排序功能，极大地提升了用户体验。 首先，jQuery是一个流行的JavaScript库，它的使用使得前端开发更加便捷。jQuery简化了DOM操作、事件...
JavaScript穿梭框，通常被称为“选择框”或“穿梭列表”，是一种常见的前端交互组件，用于在两个列表之间方便地转移选项。这种组件常用于数据筛选、用户权限设置等场景，允许用户从一组选项中选择多个项目并移动到另...
在本资源中，我们主要探讨的是一个纯JavaScript实现的高级列表功能，这通常涉及到左右两个列表框之间的数据交互。这个实现对于那些希望在不依赖任何外部库或框架的情况下，使用JavaScript增强网页用户界面的开发者来...
本项目"jquery实现用户信息左右选择特效"是基于jQuery构建的一个交互式用户信息管理功能，它优化了传统的多选列表，提供了一种更加直观和动态的方式来处理用户数据。 首先，我们要理解这个项目的背景。传统的多选...
**jQuery双向列表左右移动选择框**是一种常见的交互设计，它允许用户在两个列表之间移动项目，通常用于选择或分配选项。这种设计广泛应用于各种应用程序，如设置管理、权限分配等。下面将详细介绍如何实现这样的功能...
2. **JavaScript操作DOM**：实现选择框内容的移动，关键在于使用JavaScript来操纵DOM（文档对象模型）。通过`document.getElementById`或`querySelector`等方法获取到`select`元素，然后可以使用`options`属性获取...
右侧内容区域则根据用户在左侧菜单的选择进行动态填充，这可以通过AJAX（异步JavaScript和XML）技术实现，无需刷新整个页面即可加载新的内容。如果页面内容复杂，可能会采用模态对话框、折叠面板等组件来优化用户...
总的来说，"可浮动的左右列选择框"是一个结合了HTML、CSS和JavaScript技术的交互组件，它的实现涉及到了浮动布局、多选下拉列表以及响应式设计等多个知识点。这样的设计既提高了用户操作的便利性，也提升了界面的...
例如，要实现左右框架布局，我们可以将左侧`div`设置为固定宽度并浮动，右侧`div`则占据剩余空间。这种方式比`iframe`更便于响应式设计，因为我们可以轻松调整`div`的大小和位置以适应不同屏幕尺寸。 然后，引入`...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！