下拉列表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 Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
JS随机数产生代码分享
Feb 24 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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
层叠菜单的动态生成
2006/10/09 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
layui的select联动实现代码
2019/09/28 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Django保护敏感信息的方法示例
2019/05/09 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
美国在线印刷公司:PsPrint
2017/10/12 全球购物
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
建材投资建议书
2014/05/16 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
指导教师推荐意见
2015/06/05 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
nginx rewrite功能使用场景分析
2022/05/30 Servers