使用javascript实现单选及多选的向右和向左移动

最新推荐文章于 2023-01-02 16:22:09 发布
最新推荐文章于 2023-01-02 16:22:09 发布
阅读量523 收藏
点赞数
文章标签： javascript list function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hotboyw/article/details/6520998
版权

方法 一、

  <body>

  <h1>实现单选及多选的向右和向左移动</h1>

  <div id="lst">

   <span>

   <select id="lselect" size="10" multiple="multiple" style="width: 100px;  background-color:blue;">

   <option>选项1</option>

   <option>选项2</option>

   <option>选项3</option>

   <option>选项4</option>

   <option>选项5</option>

   <option>选项6</option>

   <option>选项7</option>

   <option>选项8</option>

   <option>选项9</option>

   <option>选项10</option>

   </select>

   <span style="width: 200px;height: 100px;">

   <input type="button" value="单个向右移动" οnclick="oneRMove()" />

   <input type="button" value="多个向右移动" οnclick="moveRMove()" />

   <input type="button" value="单个向左移动" οnclick="oneLMove()" />

   <input type="button" value="多个向左移动" οnclick="moveLMove()" />

   </span>

   <span>

    <select id="rselect" size="10" style="width: 100px;background-color:  yellow;" multiple="multiple">

   </select>

   </span>

   </span>

  </div> 

  </body>

<script type="text/javascript">

window.onload = function(){}

//获取select对象

var lselect=document.getElementById("lselect");

var rselect=document.getElementById("rselect");

//获取lselect和roptions对象中的所有option

var loptions=lselect.options;

var roptions=rselect.options;

function oneRMove(){

for(var i=0;i<loptions.length;i++){

var op=loptions[i];

if(op.selected){

rselect.appendChild(op);

break;

}

}

}

function moveRMove(){

for(var i=0;i<loptions.length;i++){

var op=loptions[i];

if(op.selected){

rselect.appendChild(op);

i--;

}

}

}

function oneLMove(){

for(var i=0;i<roptions.length;i++){

var op=roptions[i];

if(op.selected){

lselect.appendChild(op);

break;

}

}

}

function moveLMove(){

for(var i=0;i<roptions.length;i++){

var op=roptions[i];

if(op.selected){

lselect.appendChild(op);

i--;

}

}

}

</script>

方法 二、

<script type="text/javascript">

sortitems = 1;

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

   }

}

</script>

</head>

<body>

<form ACTION="" METHOD="POST">

<table border="0">

<tr>

<td><select multiple size="5" name="list1">

<option value="l1">A</option>

<option value="l2">B </option>

<option value="l3">C</option>

<option value="l4">D</option>

</select></td>

<td>

<input type="button" value="向右"  οnclick="move(this.form.list1,this.form.list2)" name="B1"><br>

<input type="button" value="向左"  οnclick="move(this.form.list2,this.form.list1)" name="B2">

</td>

<td><select multiple size="5" name="list2">

<option value="r1">E</option>

<option value="r2">F </option>

<option value="r3">G</option>

<option value="r4">H</option>

</select></td>

</tr>

</table>

</form>

</body>

crazy潘达
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
js 键盘控制表格input上下左右移动
qq_24892029的博客
10-21 8091
//初始化获取的行列 var currentLine= 0; var currentCol=0; function keyDown(obj){     var _row = obj.parentNode;     currentCol = _row.cellIndex;     currentLine = _row.parentNode.rowIndex;      e=wi
JS从左边移动到右边
MING.Z
11-22 4757
1.效果图：2.代码：&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;%@ page language="java" iport="java.util.*" pageEncoding="utf-8"%&gt; &lt;% String path = request.getContextPat
javascript实现左移右移上移下移
rich6888的专栏
08-31 714
×         分享到一键分享QQ空间新浪微博百度云收藏人人网腾讯微博百度相册开心网腾讯朋友百度贴吧豆瓣网搜狐微博百度新首页QQ好友和讯微博更多...百度分享资讯 | 安全 | 论坛 | 下载 |
input标签中使输入文本向右偏移像素解决方案（亲测有效）
CodeLuweir 的博客
04-06 4419
需求：在输入框中输入文本达到这样的效果： 之前是这样的效果： 尝试过很多博主的方法，大概就是以下几种： letter-spacing:10px; text-indent：10px <input type="button" value="按钮" style="width:80px; text-align:center" />对齐的自然没有用 都没有用，于是自己摸索了以下，用margin-left会导致整个输入框右移，那就用padding-left试试，结果还真可以 ...
JS案例之选择内容左右移动
qiqi_meng的博客
08-06 1508
JS之选择内容左右移动 描述：点击左右移动按钮，将内容在左右两个盒子之间来回移动，可以全部选中移动，也可以只移动选中项 效果： HTML结构 <body> <div class="box"> <div class="left"> <button class="left_all">全选</button> <ul class="leftlist">
基于javascript实现单选及多选的向右和向左移动实例
01-21
本文实例讲述了基于javascript实现单选及多选的向右和向左移动实例。分享给大家供大家参考。具体实现方法如下： 方法 一： <body> 实现单选及多选的向右和向左移动 <select id=lselect size=10 ...
使用javascript实现ListBox左右全选,单选,多选,全请
10-26
使用javascript实现ListBox左右全选,单选,多选,全请。需要的朋友可以过来参考下，希望对大家有所帮助
基于javascript实现listbox左右移动
10-22
主要介绍了基于javascript实现listbox左右移动的相关资料，以一个完整的实例代码分析了js实现listbox左右移动的相关技巧，感兴趣的小伙伴们可以参考一下
用javascript，当单击“》”按钮时，将左边列边框里中选中的元素复制到右边，同时从左列表中消除
weixin_44638736的博客
01-02 322
用javascript，当单击“》”按钮时，将左边列边框里中选中的元素复制到右边，同时从左列表中消除
JavaScript 下拉列表左右选择 案例
刘伟佳的博客
04-18 1104
功能描述 网页设置两个复选框，分别置入一些选项。 下面分别置入两个按钮，点击左边的按钮可以把左边选中的选项移动至右边。右边同理。 如下图所示： 分析 HTML页面设计<select name="left" id="left" multiple="multiple" size="7" style="width: 100px;height: 100px;"> <option v...
html怎么把图片左移_html元素向左移代码 html
weixin_32786041的博客
12-23 9657
html文字向左移动？这必须在JS中实现，因为CSS无法获取ID属性并做出判断，因此无法用CSS完成。html页面怎么实现把某个元素左移50像素？1。利用CSS中的margin实现了在HTML中定位元素位置并将其向左移动50像素的方法。2。基本用法是设置元素所有边距的宽度或元素每边的边距宽度。三。边距可以接收四个值，即距离的上、右、下和左值。也可以使用“左边距”分别设置距离的左值。代码如下。4本段...
定位进阶(HTML)
qq_51810428的博客
09-13 1088
相对定位 绝对定位 固定定位 z-index属性设置层级
html怎么把图片左移_css如何向左移动图片
weixin_36028876的博客
12-23 5199
在CSS中，可以使用“transform:translateX(px)”样式将图片向左移动，其中transform属性允许我们旋转、缩放、移动或倾斜元素，值可以设置为“translateX(px)”进行翻译。本教程操作环境:Windows7系统，html 5 &:& amp；CSS3版本，这个方法适用于所有品牌的电脑。推荐:css视频教程Css3非常强大，几行代码就能达到非常好的移...
html 设置元素向左浮动
Lucky小黄人的博客
11-04 3155
设置向左浮动的子元素的父元素的 display 属性为 'flex'。下面是 ant deisgn 里的样式写法，普通的 HTML 按照最普通的写法给相同属性赋值即可。 <div style={{ display: 'flex' }}> <div style={{ width: '85px' }}>第一个子元素:</div> <d...
JS元素的左右移动
Rick的博客
03-22 3564
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 步骤分析 1. 确定事件: 点击事件 :onclick事件 2. 事件要触发函数 selectOne 3. selectO...
html左边移动属性,css左边偏移属性left、右边偏移属性right
weixin_42285866的博客
06-04 5664
【实例介绍】css左边偏移属性left、右边偏移属性right通过left属性来设置左边偏移属性，通过right属性来设置右边偏移属性。【基本语法】position：static | absolute | fixed | relativeleft：auto | 长度值 | 百分比right：auto | 长度值 | 百分比【语法介绍】这个属性只有当posi...
vue中将按钮设置到网页最右边
热门推荐
小懒魔王的博客
07-04 2万+
<el-row :gutter="12"> <el-col :span="24"> <el-card shadow="always" class="cardstyle"> 靠港需求发布 <el-button type="success" class="button1" style="padding-right:10px"> 从Excel导入</el-button> .
html怎么整体水平右移,HTML如何将按钮向右移
weixin_34064233的博客
05-30 3614
对不起，如果问题是愚蠢的，因为我只是一个HTML初学者。如何将我的按钮移动到右侧？我尝试了一些方法，但似乎并不奏效。这是我的代码。HTML如何将按钮向右移Sample Dashboardp.pos_right {position: relative;left: 20px;}.button_example{border:1px solid #f9f68a; -webkit-border-radius...
如何实现单选、多选按钮样式切换
最新发布
05-16
单选、多选按钮样式切换可以通过CSS样式和JavaScript代码实现。 首先，我们可以为单选、多选按钮设置不同的class样式，例如单选按钮的class可以为"radio-btn"，多选按钮的class可以为"checkbox-btn"。 然后，在CSS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值