下拉列表select 由左边框移动到右边示例

更新时间：2013年12月04日 17:17:45 作者：

select由左边框移动到右边，下面有个不错的示例，大家可以参考下

当页面还没有加载完的时候调用下面语句，会取不到“add” 这个对象，提示为空或不是对象

 
document.getElementById("add").onclick = function(){ 
alert("hello"); 
} 

当使用便可取的对象

复制代码代码如下:

 
window.onload = function(){ 
document.getElementById("add").onclick = function(){ 
alert("hello"); 
} 
} 

复制代码代码如下:

 
<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]); 
} 

</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> 

您可能感兴趣的文章:

JavaScript之Blob对象类型的具体使用方法
这篇文章主要介绍了JavaScript之Blob对象类型的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
js实现移动端吸顶效果
这篇文章主要为大家详细介绍了js实现移动端吸顶效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
JavaScript 对象的四种方式比较详解
本文主要介绍了JavaScript 对象的四种方式比较详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
拆开JavaScript迭代器模式内部黑盒子
这篇文章主要为大家介绍了JavaScript迭代器模式内部黑盒子解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
本篇文章小编将为大家介绍，关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置。需要的朋友可以参考一下
2013-04-04
微信小程序支付及退款流程详解
近期在做微信小程序时，涉及到了小程序的支付和退款流程，所以也大概的将这方面的东西看了一个遍，就在这篇文章里总结一下
2017-11-11
Bootstrap企业网站实战项目4
这篇文章主要为大家分享了Bootstrap企业网站实战项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
JavaScript 深拷贝的循环引用问题详解
如果说道实现深拷贝最简单的方法，我们第一个想到的就是 JSON.stringify() 方法，因为JSON.stringify()后返回的是字符串，所以我们会再使用JSON.parse()转换为对象,这篇文章主要介绍了JavaScript 深拷贝的循环引用问题,需要的朋友可以参考下
2022-12-12
Bootstrap基本插件学习笔记之Popover提示框(19)
这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之Popover提示框的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Vue项目vscode 安装eslint插件的方法(代码自动修复)
这篇文章主要介绍了Vue项目vscode 安装eslint插件的方法代码自动修复,需要的朋友可以参考下
2020-04-04