<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript强化训练－－下拉列表的操作01</title>
<script language="JavaScript" type="text/javascript">
//移动下拉框被选中选项
//fromSelId :源下拉框id
//toSelId :目标下拉框id
function moveOption(fromSelId,toSelId){
var fromSel = document.getElementById(fromSelId);
var toSel = document.getElementById(toSelId);
if(fromSel==null||toSel==null){
return false;
}
for(var i = 0;i < fromSel.options.length;i++){
var _option = fromSel.options[i];
//是否选中
if(_option.selected){
//往目标下拉框加添加选项
toSel.appendChild(_option);
i--;
}
}
}
</script>
</head>
<body bgcolor="abcdef">
<form id='demoFrm' name="demoFrm" method="post" action="" >
<table border="1" align="center" width="300">
<tr>
<td colspan="3" align="center">下拉列表操作的演示</td>
</tr>
<tr>
<td align="center" width="100">
<select multiple="multiple" size="10" id="leftSel">
<option value="1">第一个理拉框的值1</option>
<option value="2">第一个理拉框的值2</option>
<option value="3">第一个理拉框的值3</option>
<option value="4">第一个理拉框的值4</option>
</select>
</td>
<td align="center" width="100">
<input type="button" id="moveTwo" value="-->>" onclick="moveOption('leftSel','rightSel');">
<br>
<input type="button" id="moveOne" value="<<--" onclick="moveOption('rightSel','leftSel');">
</td>
<td align="center" width="100">
<select multiple="multiple" size="10" id="rightSel">
<option value="1">第二个理拉框的值1</option>
<option value="2">第二个理拉框的值2</option>
<option value="3">第二个理拉框的值3</option>
<option value="4">第二个理拉框的值4</option>
</select>
</td>
</tr>
</table>
</form>
<div id="showContent" style="font-size:30px;">
</div>
</body>
</html>
分享到：
相关推荐
这里上下移动指的是在ListBox自身内切换选中项，而左右移动则涉及到在两个ListBox之间转移选中项。 1. **上下移动**： 要实现在ListBox内的上下移动，我们可以通过响应`KeyDown`事件来检查用户按下的是上箭头或下...
**jQuery双向列表左右移动选择框**是一种常见的交互设计，它允许用户在两个列表之间移动项目，通常用于选择或分配选项。这种设计广泛应用于各种应用程序，如设置管理、权限分配等。下面将详细介绍如何实现这样的功能...
"jQuery穿梭框列表按钮控制左右移动代码.zip"是一个典型的示例，它展示了如何利用jQuery实现一种被称为穿梭框（Transfer Box）的功能。穿梭框是一种常见的UI组件，通常用于在两个列表之间转移项目，常见于数据选择或...
"导航左右移动"是一种特定的导航方式，它适用于那些菜单项众多，无法一次性全部展示在屏幕上的情况。这种设计模式通常出现在移动设备或响应式设计中，因为有限的屏幕空间需要更智能的布局解决方案。 标题“导航左右...
在ASP.NET中，`ListBox`控件是一种常用的用户界面元素，用于展示可多选的列表项。本场景涉及的是一个自定义的ASCX（User Control）控件，名为"BilateralListBoxV2"，它实现了左右移动项目的功能。这种功能允许用户在...
标题中的“左右移动多选列表控件”是指一种常见的用户界面元素，用于在两个列表之间进行选择和转移项。这种控件通常包含两个并排放置的列表框，一个表示已选择的项目，另一个则显示可选项。用户可以通过点击或拖动...
标题“使用JQuery左右移动下拉列表框中的值”涉及的是在网页开发中利用JavaScript库JQuery来操作HTML的下拉列表（select元素），特别是实现选中项在两个并排的下拉列表之间动态移动的功能。这样的功能常见于用户需要...
1. **选择列表元素**：使用jQuery的选择器如`$('ul > li')`来选取所有的列表项。这将返回一个jQuery对象，可以对其中的元素进行进一步操作。 2. **排序逻辑**：定义一个函数来确定排序规则。例如，你可以根据文本...
这个名为"jQuery左右列表添加删除代码.zip"的压缩包文件包含了一个利用jQuery实现的交互式功能，即左右列表的添加与删除操作。这种功能常见于数据筛选、选项转移或菜单导航等场景，尤其适用于需要用户从多个选项中...
本教程将详细讲解如何在uni-app框架中实现列表项的左划操作功能，让你的应用更加易用且富有动态性。 uni-app是一个基于Vue.js开发的多端框架，它允许开发者编写一次代码，就能在iOS、Android、H5等多个平台上运行。...
标题"vb_Treeview节点上下左右移动.rar_VB树节点功能_adventurehpj_vb treeview_vb tree"暗示了这个压缩包包含的是一个VB应用程序，它实现了对Treeview控件节点的动态操作，如移动、添加和删除。这些功能对于创建...
本文将深入探讨如何创建一个自定义的`ViewGroup`，实现类似于QQ会话列表项的左右滑动删除功能。这个功能广泛应用于聊天应用，使得用户可以便捷地管理他们的会话。 首先，我们需要了解`ViewGroup`。`ViewGroup`是...
对于左右移动，我们可以假设存在两个`<select>`元素，分别表示“左侧列表”和“右侧列表”。用户可以将“左侧列表”的选项移动到“右侧列表”，反之亦然。这涉及到从一个`<select>`中移除元素并将其添加到另一个`...
"多项选择的列表框，左右选择，带排序功能"是一个典型的组件，它提供了高效且直观的方式来处理大量选项，让用户能够轻松地筛选、选择和组织数据。这个代码实现了一个这样的功能，允许用户在两个独立的列表之间进行...
在PHP开发中，实现多图片上传并支持图片的左右移动位置功能是一项常见的需求，尤其在社交媒体和内容管理系统中。此功能允许用户不仅上传多张图片，还能调整它们的展示顺序，创造出更个性化的布局。本篇文章将深入...
在这个代码中，可能涉及到选择列表项并将其移动到另一个列表。 4. **动画效果**： jQuery的动画功能使得在用户交互过程中添加平滑过渡效果成为可能。例如，`fadeIn()`, `fadeOut()`, `slideToggle()`等方法可以...
本文详细介绍了如何使用jQuery来实现网页上列表项的上下移动功能。在开始讲解之前，我们先来梳理一下知识点，确保我们讨论的范围是准确无误的。 首先，jQuery是一个快速、简洁的JavaScript库，它能够简化HTML文档...
首先，HTML源码是网页的基本结构，这里涉及到的左右两个列表可能是由`<ul>`（无序列表）或`<ol>`（有序列表）元素创建的，每个列表项可能用`<li>`（列表项）元素表示。这两个列表可能被嵌套在两个独立的`<div>`容器...
用户可以通过拖动、点击或使用特定操作（如反选）在列表之间移动项，从而实现快速选择和管理。 首先，我们要理解“列表左右选择”的基本功能。左侧列表通常包含所有可选项，而右侧列表则展示用户已经选择的项目。...