时间:2021-05-26
通过JavaScript设计一段代码,实现下面的功能.初始界面如下图,选中左面标签中的几个选项后再点-->,则将他们移动到右侧框内,同时左侧选项消失.点击====>后,左侧全部选项移动到右侧.点击右侧几个选项后,再点<---,则这些选项移动到左侧,点<====,则右侧全部选项移动到左侧.代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box_L,#choice,#box_R{ display: inline-block; } </style></head><body><div id="box_L"> <select id="left" multiple size="10"> <option>one</option> <option>two</option> <option>three</option> <option>four</option> <option>five</option> <option>six</option> </select></div><div id="choice"> <input type="button" width="5px" value="--->" onclick="add()"><br> <input type="button" width="5px" value="====>" onclick="addall()"><br> <input type="butoon" width="5px" value="<---" onclick="sub()"><br> <input type="butoon" width="5px" value="<====" onclick="suball()"><br></div><div id="box_R"> <select id="right" size="10" multiple> <option>seven</option> </select></div><script> var left=document.getElementById("left"); var right=document.getElementById("right"); function add(){ var options=left.children; for (var i=0;i<options.length;i++){ if (options[i].selected==true){ options[i].selected=false; right.appendChild(options[i]); i--; } } } function addall(){ var options=left.children; for (var i=0;i<options.length;i++){ right.appendChild(options[i]); i--; } } function sub(){ var options=right.children; for (var i=0;i<options.length;i++){ if (options[i].selected==true){ options[i].selected=false; left.appendChild(options[i]); i--; } } } function suball(){ var options=right.children; for (var i=0;i<options.length;i++){ left.appendChild(options[i]); i--; } }</script></body></html>结果如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下:select选择框内容左右移动添加删除代码基于jquery-1.8.3.m
本文实例讲解了javascript实现listbox左右移动的详细代码,分享给大家供大家参考,具体内容如下效果图:具体代码:listbox左右移动选项1选项2选
本文实例为大家分享了WPF实现左右移动效果展示的具体代码,供大家参考,具体内容如下实现控件或布局的左右移动(晃动)主要用到DoubleAnimation以及St
电脑键盘上下左右不能移动的原因及解决方法如下: 1、如果是在数字键盘区,按numlock键去关闭数字输入功能,然后就可以通过2、4、6、8来实现上下左右移动。
本文向大家介绍一个javascript实现的动画。点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动。请看下面代码:javascript