实现效果：
未移动前
移动后
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function move(strlist1,strlist2){
var list1=document.getElementById(strlist1);
var list2=document.getElementById(strlist2);
if(list1.length!=0){
var selected=0;
for(i=0;i<list1.length;i++){
//alert(list1.children[i]);
if(list1.children[i].selected){
selected=i;
//alert(i);
}
}
//alert(selected);
list2.appendChild(list1.children[selected]);
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<form method="get" action=""><br />
<div style="position:absolute; top: 16px; left: 12px;">
<select name="selectList1" id="selectList1" size="10">
<option value="1">11</option>
<option value="2">12</option>
<option value="3">13</option>
<option value="4">14</option>
<option value="5">15</option>
</select></div>
<div style="position:absolute; left: 81px; top: 59px;"><input type="button" value=">>" onclick="move('selectList1','selectList2')"/><br/>
<input type="button" value="<<" onclick="move('selectList2','selectList1')"/></div>
<div style="position:absolute; left: 131px; top: 18px;">
<select name="selectList2" id="selectList2" size="10">
<option value="1">21</option>
<option value="2">22</option>
<option value="3">23</option>
<option value="4">24</option>
<option value="5">25</option>
</select></div>
<br/>
</form>
</body>
</html>
- 大小: 3.7 KB
- 大小: 3.6 KB
分享到：
相关推荐
在这个"Javascript左右选择框"的教程中，我们将深入探讨其背后的实现原理和相关技术。 首先，我们要理解这个经典Demo的基本结构。一个基本的左右选择框由两部分组成：左侧的可选列表和右侧的已选列表。`index.html`...
2. 使用 JavaScript 实现组合列表框中元素移动效果：需要编写 init 方法对两个列表框进行初始化，并编写 move 和 moveAll 函数将选中的选项移到另一个列表框中。 3. 使用 selectedIndex 属性获取当前选中的选项：...
在JavaScript编程中，创建具有左右两个下拉选择框并实现左右上下移动功能是一个常见的交互设计。这个功能常常用于用户在两个列表之间转移选项，比如在“可用”和“已选”之间切换。以下是对这个主题的详细解释： ...
例如，当选项移动时，可以使用淡入淡出效果： ```javascript $(document).ready(function() { // ...其他代码... $('#moveRight').click(function() { // 添加淡入淡出效果 selectedOptions.fadeOut('slow', ...
2. **JavaScript操作DOM**：实现选择框内容的移动，关键在于使用JavaScript来操纵DOM（文档对象模型）。通过`document.getElementById`或`querySelector`等方法获取到`select`元素，然后可以使用`options`属性获取...
JavaScript可以为下拉选择框添加更复杂的交互，如动态加载选项、改变选项时触发事件等。例如，可以监听`onchange`事件，当用户选择新值时执行特定操作。 5. ** Accessibility**： 考虑到无障碍性（Accessibility...
应用背景：在页面中有两个列表框，需要把其中一个列表框的元素移动到另一个列表框 。 实现的基本思想： （1）编写init方法对两个列表框进行初始化； （2）为body添加onload事件调用init方法； （3）编写...
在网页设计中，下拉选择框（Dropdown Select）是一种常见的用户界面元素，它允许用户从一组预定义的选项中进行选择。然而，当选项过多时，屏幕空间可能不足以展示所有选项，这时就需要添加滚动条来解决这个问题。...
`lhgdialog`是一款基于JavaScript的弹出窗口插件，它的优点在于简洁的API、丰富的配置选项和良好的兼容性。下面是一些关键功能和用法： 1. **基本用法**：引入`lhgdialog.js`和相应的CSS文件，然后调用`$.dialog`...
在JavaScript的世界里，"JS原生双栏穿梭选择框"是一种常见的交互元素，它通常用于数据筛选、分类或分配任务等场景。这个功能的核心在于，用户可以通过选择左侧栏的选项，然后通过点击方向键（或者其他的触发方式）将...
在JavaScript编程中，实现单击输入框弹出选择框效果是一种常见的交互设计，它能够提升用户体验，让用户在输入时能够方便地从预设的选项中选取。本文将深入讲解如何利用JavaScript来创建这样一个功能。 首先，我们...
根据提供的文件信息，本文将详细解析“jquery左右选择框”的实现原理、代码结构及功能特点。此案例展示了如何使用jQuery库来实现一个简单的左右选择框交互功能，这在实际项目中非常常见，例如用户权限分配、多选项...
### 使用JavaScript开发移动应用程序 #### 一、引言 随着移动互联网的发展，移动应用程序变得越来越重要，成为企业和个人展示自己产品和服务的重要渠道。对于初学者而言，了解如何使用JavaScript进行移动应用开发...
用户可以通过点击按钮将左边选择框中的选项移动到右边，或者将右边选择框中的选项移动到左边，以此实现对数据的选择和操作。 这个功能常用于多选场景，例如用户在网站上自定义设置、选择服务项目等。下面我们将深入...
### JavaScript 源代码分析：基于 Vant UI 框架实现时间段选择器 #### 一、概述 本文档详细介绍了如何使用 Vant UI 框架来实现一个时间段选择器的功能。Vant 是一套轻量、可靠的移动端 Vue 组件库，它提供了丰富的...
这个类库可能是用某一种编程语言（如Java、C#或JavaScript）实现的，可能适用于桌面应用、移动应用或Web应用。它可能提供了丰富的API接口和配置选项，让开发者能够定制选择框的外观、行为以及与其他组件的交互。例如...
左侧选择框展示所有可选项，用户通过多选操作挑选后，点击“添加”按钮将这些选项移动到右侧的已选框。同时，用户还可以从右侧已选框中移除选项，这样就提供了双向操作的灵活性。 在实际应用中，这样的功能通常需要...
在移动Web开发中，Mui框架是一个非常受欢迎的选择，它提供了丰富的组件和API，使得开发者能够快速构建出响应式、高性能的手机应用。本教程将详细讲解如何利用Mui框架实现一个带有选项卡切换功能的列表，同时支持触屏...
本话题将详细探讨如何使用HTML实现垂直选项卡的效果，使得内容能够随着用户选择的不同选项卡进行垂直移动展示。 首先，我们需要理解HTML的基本结构。一个HTML文档通常由`<html>`、`<head>`和`<body>`元素组成。`...