<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>对两个SELECT元素进行操作</title>
<script language="javascript" type="text/javascript">
function ToRight()
{
var rightSelect = document.getElementById("right");
var leftSelect = document.getElementById("left");
OptionMove(leftSelect,rightSelect);
}
function ToLeft()
{
var rightSelect = document.getElementById("right");
var leftSelect = document.getElementById("left");
OptionMove(rightSelect,leftSelect);
}
function OptionMove(source,target)
{
if(source.length==0 || source.selectedIndex==-1)
{
return;
}
var index = source.selectedIndex;
var temp = source.options(index);
target.add(new Option(temp.text,temp.value))
source.remove(index);
if(source.length>=index+1)
{
source.selectedIndex=index;
}
else
{
source.selectedIndex=index-1;
}
target.selectedIndex=target.length-1;
}
</script>
</head>
<body>
<div style="float: left;">
<select id="left" size="2" style="width: 121px; height: 184px;">
<option value="左1">左1</option>
<option value="左2">左2</option>
<option value="左3">左3</option>
</select>
</div>
<div style="float: left;">
<div>
<input type="button" id="btnRight" value=">>" onclick="ToRight()" />
</div>
<div>
<input type="button" id="btnLeft" value="<<" onclick="ToLeft()" />
</div>
</div>
<div style="float: left;">
<select id="right" size="2" style="width: 121px; height: 184px;">
<option value="右1">右1</option>
<option value="右2">右2</option>
<option value="右3">右3</option>
</select>
</div>
</body>
</html>
分享到：
相关推荐
主要介绍了JavaScript实现两个select下拉框选项左移右移功能，js实现下拉框元素互相移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
如下所示： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<head><... charset=utf-8″ /><...script type=”text/javascript”
6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE...
6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE...
热门功能列表： sigle 20KB文件，没有依赖项，100％纯javascript 包括两个主题（浅色，深色）。 专为主题而设计主题混合支持使用前缀选择器同时支持简单和多个选择字段完全响应，适合任何宽度（可选）用于简单选择...
当利用text或textarea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。例： <Form> ('this.test)"> </Form> 7.onSubmit事件：属于表单元素，写在表单标签内。语法：...
82 4.2 验证数字字段 84 4.3 验证电话号码 88 4.4 验证用户ID 90 4.5 验证日期 92 4.6 验证电子邮件地址 94 4.7 检查复选框是否被选中 96 4.8 检查单选按钮是否被选中 99 4.9 检查select元素中的选项是否被选中 ...
实例046 比较两个时间戳的大小 77 实例047 使用条件运算符判断数字的奇偶性 78 实例048 判断用户是否具有后台管理权限 79 实例049 打印随机组合生日祝福语 80 实例050 打印2000~2020年的所有闰年 81 实例051 前置...
实例046 比较两个时间戳的大小 77 实例047 使用条件运算符判断数字的奇偶性 78 实例048 判断用户是否具有后台管理权限 79 实例049 打印随机组合生日祝福语 80 实例050 打印2000~2020年的所有闰年 81 实例051 前置...
正则表达式 /s$/ 包含两个字符. 第一个特殊字符 "s" 是按照字面意思与自身相匹配.第二个字符 "$" 是一个特殊字符,它所匹配的是字符串的结尾.所以正则表达式 /s$/ 匹配的就是以字母 "s" 结尾 的字符串. 1.直接量...
-增加TabStrip中Tab控件可关闭属性EnableClose(默认为false)以及两个方法GetShowReference和GetHideReference(feedback:anson)。 -修正绑定到Tree的XMLDocument中Icon属性映射错误(feedback:nopnop9)。 -修正...
-修正extjs最新版本(v3.2.2)中的一个bug，如果下拉列表中存在两个相同的Text，则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页...
这里的IDE设备包括了IDE硬盘和IDE光驱，第一、第二组设备是指主板上的第一、第二根IDE数据线，一般来说靠近芯片的是第一组IDE设备，而主设备、从设备是指在一条IDE数据线上接的两个设备，大家知道每根数据线上可以接...
3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本...