下拉列表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 相关文章推荐
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
JavaScript Perfection kill 测试及答案
Mar 23 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 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
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python方向键控制上下左右代码
2018/01/20 Python
python操作oracle的完整教程分享
2018/01/30 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Python创建自己的加密货币的示例
2021/03/01 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
Python的两道面试题
2013/06/29 面试题
自我鉴定模板
2013/10/29 职场文书
新员工入职感言
2014/02/01 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
导游词幽默开场白
2019/06/26 职场文书
python 三边测量定位的实现代码
2021/04/22 Python
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
java多态注意项小结
2021/10/16 Java/Android