<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
sortitems = 1; // Automatically sort items within lists? (1 or 0)
function move(fbox,tbox) {
for(var i=0; i<fbox.options.length; i++) {
if(fbox.options[i].selected && fbox.options[i].value != "") {
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
}
}
BumpUp(fbox);
if (sortitems) SortD(tbox);
}
function moveall(fbox,tbox) {
for(var i=0; i<fbox.options.length; i++) {
if(fbox.options[i].value != "") {
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
}
}
BumpUp(fbox);
if (sortitems) SortD(tbox);
}
function BumpUp(box) {
for(var i=0; i<box.options.length; i++) {
if(box.options[i].value == "") {
for(var j=i; j<box.options.length-1; j++) {
box.options[j].value = box.options[j+1].value;
box.options[j].text = box.options[j+1].text;
}
var ln = i;
break;
}
}
if(ln < box.options.length) {
box.options.length -= 1;
BumpUp(box);
}
}
function SortD(box) {
var temp_opts = new Array();
var temp = new Object();
for(var i=0; i<box.options.length; i++) {
temp_opts[i] = box.options[i];
}
for(var x=0; x<temp_opts.length-1; x++) {
for(var y=(x+1); y<temp_opts.length; y++) {
if(temp_opts[x].text > temp_opts[y].text) {
temp = temp_opts[x].text;
temp_opts[x].text = temp_opts[y].text;
temp_opts[y].text = temp;
temp = temp_opts[x].value;
temp_opts[x].value = temp_opts[y].value;
temp_opts[y].value = temp;
}
}
}
for(var i=0; i<box.options.length; i++) {
box.options[i].value = temp_opts[i].value;
box.options[i].text = temp_opts[i].text;
}
}
// End -->
</script>
<form ACTION="" METHOD="POST">
<table border="0">
<tr>
<td><select multiple size="7" name="list1" style="width:250px">
<option value="11"> item 1.1 </option>
<option value="12"> item 1.2 </option>
<option value="13"> item 1.3 </option>
</select></td>
<td>
<input type="button" value=" >> " onclick="moveall(this.form.list1,this.form.list2)" name="B3">
<br/>
<input type="button" value=" > " onclick="move(this.form.list1,this.form.list2)" name="B1">
<br/>
<input type="button" value=" < " onclick="move(this.form.list2,this.form.list1)" name="B2">
<br/>
<input type="button" value=" << " onclick="moveall(this.form.list2,this.form.list1)" name="B4">
</td>
<td><select multiple size="7" name="list2" style="width:250px">
<option value="21"> item 2.1 </option>
<option value="22"> item 2.2 </option>
<option value="23"> item 2.3 </option>
</select></td>
</tr>
</table>
</form>
分享到:
相关推荐
NULL 博文链接:https://hylong05.iteye.com/blog/606784
javascript实现的左右选择框效果代码
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动! 运行效果图:...
插件描述:简单的jquery实现左右角色的互选功能
列表框:只能选择数据 组合框:既能输入数据,又能选择“ 应用背景:在页面中有两个列表框,需要把其中一个列表框的元素移动到另一个列表框 。 实现的基本思想: (1)编写init方法对两个列表框进行初始化;...
jquery角色左右选择框 jq点评网星级评论 js js+css实现上下翻页相册代码 js+css实现上下翻页相册代码.rar js制作的左侧上下滑动缩略图右侧渐显动 JS动态图例代码 JS动态图例代码.rar my.html QQ音乐10屏带缩略图JS...
提示框支持上下左右等多种定位,可自定义信息属性标签默认为abtext,也可直接选择获取title属性标签默认信息。支持跟随鼠标位置提示以及固定位置提示。插件自动检测是否处于浏览器窗口边缘,确保提示框总是停留在...
废话不多说,先给大家展示一下效果图,如果大家感觉不错,请参考实现代码。 效果图如下所示: 代码如下所示: <!DOCTYPE ...
由于项目中用到左右选择的控件,网上找了一些相关的实现,基本上有两个: 1、基于JQuery UI的控件: 这个看起来样式不错,而且使用起来功能也比较齐全,但是与传统的左边选择到右边的方式不同,有点别扭。...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!
66、原生JavaScript实现全部取消选择通用方法 67、原生JavaScript实现打开一个窗体通用方法 68、原生JavaScript判断是否为客户端设备 69、原生JavaScript获取单选按钮的值 70、原生JavaScript获取复选框的值 71、...
主要介绍了vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
1、可以选择年月或者选择日期,比如:选择年月,在显示框中就显示2022-06,如果选择日期,则显示2022-06-04 2、默认是当前日期,当点击控件时弹框显示定位到当前的年和月,日默认为空
本插件实现左右选项的灵活切换,并可动态配置加载选择项
增加复选框选择:全选、取消、反选,需要调用 .setChecked(oper, name) oper: 1-全选,2-取消,3-反选; name: checkbox的 name属性名称 解决启用bootstrap.css之后,表格列宽获取的问题,目前采用的方法是屏蔽,...
实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...
压缩文件内含html,对应css,对应js,jq框架,资源图片,解压即可预览效果; 主要功能: 1.实现图片轮播; 2.实现轮播过程中左右箭头的图片切换; 3.实现鼠标悬停轮播停止,...4.实现轮播框下示图点的正确指示及悬停选择对应图片