用JavaScript实现下拉列表左右选择，很简单，不过要特别注意循环时要注意变量是否发生了变化（见代码）
<!DOCTYPE html>
<html>
<head>
<title>JavaScript下拉列表左右选择</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" >
function chooseToRight()
{
var op=document.getElementById("s1").getElementsByTagName("option");
var select2=document.getElementById("s2");
var k=op.length;
for(var i=0;i<k;i++)
{
if(op[i].selected==true)
{
select2.appendChild(op[i]);
k--;i--; //这里要特别注意！！！因为appendChild相当于剪切，所以每次循环之后要执行k--,i--
}
}
}
function chooseToLeft()
{
var op=document.getElementById("s2").getElementsByTagName("option");
var select2=document.getElementById("s1");
var k=op.length;
for(var i=0;i<k;i++)
{
if(op[i].selected==true)
{
select2.appendChild(op[i]);
k--;i--;
}
}
}
function allToLeft()
{
var op=document.getElementById("s2").getElementsByTagName("option");
var select2=document.getElementById("s1");
var k=op.length;
for(var i=0;i<k;i++)
{
select2.appendChild(op[i]);
k--;i--;
}
}
function allToRight()
{
var op=document.getElementById("s1").getElementsByTagName("option");
var select2=document.getElementById("s2");
var k=op.length;
for(var i=0;i<k;i++)
{
select2.appendChild(op[i]);
k--;i--;
}
}
</script>
</head>
<body>
<div style="float: left">
<select id="s1" multiple="multiple" style="width: 120px;height: 150px">
<option>AAAAAAA</option>
<option>BBBBBBB</option>
<option>CCCCCCC</option>
<option>DDDDDDD</option>
<option>EEEEEEE</option>
</select><br><br>
<input type="button" value="选中添加到右边" onclick="chooseToRight();"/><br><br>
<input type="button" value="全部添加到右边" onclick="allToRight();"/><br>
</div>
<div style="float: left">
<select id="s2" multiple="multiple" style="width: 120px;height: 150px">
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
<option>4444444</option>
<option>5555555</option>
</select><br><br>
<input type="button" value="选中添加到左边" onclick="chooseToLeft();"/><br><br>
<input type="button" value="全部添加到左边" onclick="allToLeft();"/><br>
</div>
</body>
</html>
运行效果：
aaarticlea/png;base64,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" alt="" />
JavaScript案例五：下拉列表左右选择的更多相关文章
-
JavaScript基础2——下拉列表左右选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
-
js实现-下拉列表左右选择
下拉列表左右选择 * 下拉选择框 <select> <option>111</opt ...
-
JavaScript案例开发之扑克游戏
随着时代的发展,知识也在日益更新,但是基础知识永远不会过时,它是新时代的基石,更是我们进一步学习的保障,下面带着大家用JavaScript开发一款真正的扑克游戏,和大家一起分享,希望你们能够喜欢:闲话 ...
-
Jquery实现下拉列表左右选择
知识点: jquery 的 click dbclick 事件 appendTo方法 <!DOCTYPE html> <html> <head> <met ...
-
jQuery学习(七)——使用JQ完成下拉列表左右选择
1.需求:实现以下功能 2.步骤分析: 第一步:确定事件(鼠标单击事件click) 第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧se ...
-
JavaScript学习笔记之下拉选择框的操作
对于下拉框的操作十分繁多,这几天项目须要就总结一下 一.动态构建option 有时候我们须要动态构建下拉选择框里面的值,这里我们就要用到 var varItem = new Option(" ...
-
WPF案例 (五) 对控件界面使用倒影
原文:WPF案例 (五) 对控件界面使用倒影 在这个程序里对5个2D控件界面应用了垂直倒影,边缘模糊化和模型变换,在本例中,这5个2D控件为Border, 各包含了一幅Image,界面如下图所示,源码 ...
-
javascript中五种基本数据类型
前言: JavaScript中有五种基本数据类型(也叫做简单数据类型)分别为:undefined.null.bolean.number.string:另外还含有一种复杂的数据类型:object. 深入 ...
-
ASP.NET,C#后台调用前台javascript的五种方法
C#后台调用前台javascript的五种方法 由于项目需要,用到其他项目组用VC开发的组件,在web后台代码无法访问这个组件,所以只好通过后台调用前台的javascript,从而操作这个组件.在网上 ...
随机推荐
-
java根据逗号分隔字符串，后加上单引号
public class SpiltString { public String spilt(String str) { StringBuffer sb = new StringBuffer(); ...
-
Object Pascal 数据类型
数据类型与定义变量 Object Pascal 语言的最大特点是对数据类型的要求非常严谨.传递给过程或函数的参数值必须与形参的类型一致.在Object Pascal 语言中不会看到像C 语言编译器提 ...
-
SCJP_104——题目分析（3）
11. what is reserved words in java?A. run B. default C. implement D. import Java 中,给标识符取名的时候,不能使用关键字 ...
-
ios VS android
本来是学习IOS的,但是最近接到的是有关于安卓的项目,害怕弄混,所以在这个技术博客里写一下对比. IOS ...
-
Vue学习记录第二天
又来做笔记啦,今天又自暴自弃了,还好及时清醒过来了,什么时候努力都不晚,主要是要一直坚持下去,只要坚持就一定会有收获,所有成功得人背后都是付出了巨大得努力的,没有人平白无故的成功.看似光鲜亮丽的背后, ...
-
Python进阶：函数式编程(高阶函数，map,reduce,filter,sorted,返回函数,匿名函数,偏函数)...啊啊啊
函数式编程 函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数调用,就可以把复杂任务分解成简单的任务,这种分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计 ...
-
前后端分离之mockjs基本介绍
安装与使用 # 安装 npm install mockjs #使用 Mock var Mock = require('mockjs') var data = Mock.mock({ // 属性 lis ...
-
Select2下拉框总结
用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件. 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下 ...
-
Logstash之四：logstash接收kafka数据
3.kafka+logstash整合logstash1.5以后已经集成了对kafka的支持扩展,可以在conf配置中直接使用 vim /etc/logstash/conf.d/pay.conf inp ...
-
conductor Workflow Metrics
Server Metrics conductor使用spectator收集指标.https://github.com/Netflix/spectator 名称 目的 标签 workflow_serve ...