`
newpeter
  • 浏览: 38694 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

js实现的左右选择框

阅读更多

<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>

分享到:
评论
1 楼 海阔天高 2010-03-16  
非常感谢
要找的就是这个

相关推荐

    js实现左右2个下拉选择框,左右上下移动功能

    NULL 博文链接:https://hylong05.iteye.com/blog/606784

    javascript实现的左右选择框效果代码

    javascript实现的左右选择框效果代码

    select选择框内容左右移动添加删除.zip

    select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!

    基于jquery实现select选择框内容左右移动添加删除代码分享

    select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动! 运行效果图:...

    jquery角色左右选择框rar

    插件描述:简单的jquery实现左右角色的互选功能

    JavaScript如何实现组合列表框中元素移动效果

    列表框:只能选择数据 组合框:既能输入数据,又能选择“ 应用背景:在页面中有两个列表框,需要把其中一个列表框的元素移动到另一个列表框 。  实现的基本思想:  (1)编写init方法对两个列表框进行初始化;...

    61个时尚网页特效

    jquery角色左右选择框 jq点评网星级评论 js js+css实现上下翻页相册代码 js+css实现上下翻页相册代码.rar js制作的左侧上下滑动缩略图右侧渐显动 JS动态图例代码 JS动态图例代码.rar my.html QQ音乐10屏带缩略图JS...

    jQuery实现文本描述提示框插件abTips

    提示框支持上下左右等多种定位,可自定义信息属性标签默认为abtext,也可直接选择获取title属性标签默认信息。支持跟随鼠标位置提示以及固定位置提示。插件自动检测是否处于浏览器窗口边缘,确保提示框总是停留在...

    基于JavaScript实现下拉列表左右移动代码

    废话不多说,先给大家展示一下效果图,如果大家感觉不错,请参考实现代码。 效果图如下所示: 代码如下所示: &lt;!DOCTYPE ...

    MultiSelect左右选择控件的设计与实现介绍

    由于项目中用到左右选择的控件,网上找了一些相关的实现,基本上有两个: 1、基于JQuery UI的控件: 这个看起来样式不错,而且使用起来功能也比较齐全,但是与传统的左边选择到右边的方式不同,有点别扭。...

    select选择框内容左右移动添加删除特效代码

    select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    66、原生JavaScript实现全部取消选择通用方法 67、原生JavaScript实现打开一个窗体通用方法 68、原生JavaScript判断是否为客户端设备 69、原生JavaScript获取单选按钮的值 70、原生JavaScript获取复选框的值 71、...

    vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)

    主要介绍了vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

    vue日期控件实现可以选择年月或者选择年月日

    1、可以选择年月或者选择日期,比如:选择年月,在显示框中就显示2022-06,如果选择日期,则显示2022-06-04 2、默认是当前日期,当点击控件时弹框显示定位到当前的年和月,日默认为空

    bootstrap双边栏选择框

    本插件实现左右选项的灵活切换,并可动态配置加载选择项

    JS固定表头和左边列V2.0(源码)

    增加复选框选择:全选、取消、反选,需要调用 .setChecked(oper, name) oper: 1-全选,2-取消,3-反选; name: checkbox的 name属性名称 解决启用bootstrap.css之后,表格列宽获取的问题,目前采用的方法是屏蔽,...

    JavaScript网页特效范例宝典源码

    实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...

    轮播图的Jquery实现

    压缩文件内含html,对应css,对应js,jq框架,资源图片,解压即可预览效果; 主要功能: 1.实现图片轮播; 2.实现轮播过程中左右箭头的图片切换; 3.实现鼠标悬停轮播停止,...4.实现轮播框下示图点的正确指示及悬停选择对应图片

Global site tag (gtag.js) - Google Analytics