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


Posted in Javascript onDecember 04, 2013

当页面还没有加载完的时候调用下面语句,会取不到“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 相关文章推荐
js常用代码段收集
Oct 28 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
vue的for循环使用方法
Feb 12 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 #Javascript
JavaScript执行顺序详细介绍
Dec 04 #Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 #Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 #Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 #Javascript
两个数组去重的JS代码
Dec 04 #Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 #Javascript
You might like
十天学会php之第六天
2006/10/09 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
prototype 的说明 js类
2006/09/07 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
python分割文件的常用方法
2014/11/01 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
工商管理专业职业生涯规划
2014/01/01 职场文书
端午节活动策划方案
2014/03/09 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
小学生安全演讲稿
2014/04/25 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
2014公司年终工作总结
2014/12/19 职场文书
总经理助理岗位职责
2015/01/31 职场文书
交通安全月活动总结
2015/05/08 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
找规律教学反思
2016/02/23 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS