<script type="text/javascript">
//选中的从左边移到右边
function toright() {
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
if(firstElement.selectedIndex != -1){ //selectedIndex 是select 的属性
secondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
}
}
}
//全部移动到右边
function allright(){
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
secondElement.appendChild(firstoptionElement[0]);//option选项选中时候索引为0
}
}
//双击移动到右边
function db(){
/* //方法一
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
var firstoptionElement = firstElement.getElementsByTagName("option");
var len = firstoptionElement.length;
for(var i=0;i<len;i++){
if(firstElement.selectedIndex != -1){ //selectedIndex 是select 的属性
secondElement.appendChild(firstoptionElement[firstElement.selectedIndex]);
}
} */
//方法二
var firstElement = document.getElementById("first");
var secondElement = document.getElementById("second");
secondElement.appendChild(firstElement[firstElement.selectedIndex]);
}
//获取右边框中的value值，以#号分隔
function getValues(){
var secondElement = document.getElementById("second");
var secondoptionElement = secondElement.getElementsByTagName("option");
var len = secondoptionElement.length;
var value = "";
for(var i=0;i<len;i++){
value += secondoptionElement[i].value + "#";
}
value = value.substring(0, value.length-1);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<table width="285" height="169" border="0" align="left">
<tr>
<td width="126">
<select name="first" size="10" multiple="multiple" id="first" ondblclick="db()">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
</select>
</td>
<td width="69" valign="middle">
<input id="add" name="add" type="button" value="---->" onclick="toright()"/>
<input id="add_all" name="add_all" type="button" value="==>" onclick="allright()"/>
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" id="second">
<option value="选项8">选项8</option>
</select>
</td>
</tr>
</table>
</body>
分享到：
相关推荐
select由左边框移动到右边，下面有个不错的示例，大家可以参考下
本篇文章主要是对两个select多选模式的选项相互移动示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- import CSS -->...
jQuery操作Select Option：向上移动选中的option、向下移动选中的option、移除选中的option、获取所有的option值、添加option等等，下面有个不错的示例，感兴趣的朋友不要错过
主要介绍了JavaScript, select标签元素左右移动功能实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
主要介绍了Vue实现鼠标经过文字显示悬浮框效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
用于处理Android模式的SelectFile库...下载或安装到APDE 如果要手动安装SelectFile，可以在这里找到最新的二进制软件包： : 。 如果您使用的是APDE应用程序，请从上述链接下载并将压缩的库（.zip文件）导入APDE。用法安
它们可以在不破坏查询结果集的情况下，对每一行数据进行计算，比如计算行的排名、累计和、移动平均等。以下是SQL开窗函数的一些常用功能和语法： 基本语法： SELECT column1, column2, ..., window_function() ...
实现两个下拉框数据移动，追加 代码如下: $(‘#add’).click(function(){ var $options = $(‘#select1 option:selected’); //获取选中的项 var $remove = $options.remove(); $remove.appenTo(‘#select2’); }); ...
代码如下:USE masterGO DECLARE @DBName sysname,...SELECT @DBName = ‘TargetDatabaseName’, –input database name @DestPath = ‘D:\SqlData\’ –input destination path — kill database processesDECLAR
React选择树该组件可帮助您逐步，逐级选择树状数据结构的元素存储库本身尚未移动到单独的npm软件包。 因此，它包含该组件的源代码以及主要App.js组件内的几个示例。例子假设您正在使用市场，并且正在寻找来自某些...
18.jQuery美化复选框Checkbox和radio单选框的插件hcheckbox示例 19.jQuery漂亮Flash卡通动感菜单示例 20.jQuery漂亮动感二级网站导航菜单源码下载 21.jquery漂亮苹果系统动画效果的导航菜单示例 22.jquery...
根据需求要实现通过键盘上下移动，获得联想菜单中的值，如同google baidu的查询功能。 在网上找了很久没有找到可以实现该功能的插件，无奈只能自己动手改代码。 找到js中的KEY.DOWN 和 KEY.UP执行代码 如下： 代码...
ReactiveUI 是集成了 .Net 的 ReatIve 扩展的 MVVM 框架，用来创建运行与任何移动设备或者桌面平台的优雅的可测试的用户接口。它支持 Xamarin.iOS，Xamarin.Android，Xamarin.Mac， WPF，Windows Forms，Windows ...
目前您只能更改建筑等级、陷阱、装饰和一些重生变量，但将来会实现更多功能，例如移动建筑（带碰撞检测）、更改兵营中的部队、编辑法术工厂内的法术等。 . 我如何获得村庄档案？ 如果你是私人服务器所有者，它是...
01022将Excel移动到屏幕以外 01023隐藏Excel 01024改变Excel的标题文字 01025删除Excel的标题文字 01026将Excel设置为全屏显示 01027在状态栏中显示信息 01028显示、隐藏状态栏 01029显示、隐藏编辑栏 01030显示、...
8.1.9 查找或移动记录 8.1.10 写记录 8.1.11 读取记录 8.1.12 删除记录 8.1.13 流操作 8.2 数据库操作综合示例 第9章 SQLCE数据库编程 9.1 SQL Server FOR CE的介绍 9.1.1 SQLCE简介 9.1.2 SQL Server CE ...
评价： 这种操作牵连大量的数据的移动，这种做法不适合大容量但数据操作 3),例如：在一个外部表中导入数据，由于某些原因第一次只导入了一部分，但很难判断具体位置，这样只有在下一次全部导入，这样也就产生好多...