下拉列表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 相关文章推荐
匹配任意字符的正则表达式写法
Apr 29 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
JS实现拖动示例代码
Nov 01 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
JS数组属性去重并校验重复数据
Jan 10 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
phpstorm编辑器乱码问题解决
2014/12/01 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
Vue组件选项props实例详解
2017/08/18 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
Python操作SQLite简明教程
2014/07/10 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
python tornado使用流生成图片的例子
2019/11/18 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
小学校长汇报材料
2014/08/20 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
清明节主题班会
2015/08/14 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers