用javascript，当单击“》”按钮时，将左边列边框里中选中的元素复制到右边，同时从左列表中消除

于 2023-01-02 16:22:09 发布
阅读量358 收藏 2
点赞数 1
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44638736/article/details/128521957
版权

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Droid</title>
<style type="text/css">
select {
    width: 100px;
    height: 200px;
}
</style>
<script type="text/javascript">
    var move = function (obj)
    {
        var sel1 = document.getElementById ('sel1');
        var sel2 = document.getElementById ('sel2');
        if (obj.value == '>>')
        {
            for ( var i = 0; i < sel1.children.length; i++)
            {
                var x = sel1.children[i];
                if (x.selected)
                {
                    sel2.appendChild (x);
                    i = -1;
                    continue;
                }
            }
        }
        else if (obj.value == '<<')
        {
            for ( var i = 0; i < sel2.children.length; i++)
            {
                var x = sel2.children[i];
                if (x.selected)
                {
                    sel1.appendChild (x);
                    i = -1;
                    continue;
                }
            }
        }
    }
</script>
</head>
<body>
    <table>
        <tr>
            <td rowspan="2"><select multiple="multiple" id="sel1">
                    <option>111a</option>
                    <option>111c</option>
                    <option>111d</option>
                    <option>111f</option>
                    <option>111s</option>
                    <option>111h</option>
                    <option>111g</option>
            </select>
            </td>
            <td><table>
                    <tr>
                        <td><input type="button" value=">>" οnclick="move(this);" />
                        </td>
                    </tr>
                    <tr>
                        <td><input type="button" value="<<" οnclick="move(this);" /></td>
                    </tr>
                </table></td>
            <td><select multiple="multiple" id="sel2">
                    <option>111</option>
                    <option>111</option>
                    <option>111</option>
                    <option>111</option>
                    <option>111</option>
                    <option>111</option>
                    <option>111</option>
            </select>
            </td>
        </tr>
    </table>
</body>
</html>

风吹花落知多少
关注
JS从左边移动到右边
MING.Z
11-22 4788
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
layui点击行时选中或取消自定义的复选框
qq_39280563的博客
08-04 1033
先上效果图： 点击行的时候，会改变复选框的选中状态。注意不要使用trigger的click事件，会导致死循环。 $("tr").on("click", function (event) { let ck = $(this).find(".layui-form-checkbox"); if (ck.hasClass("layui-form
html 把左框的选中项添加到右框
weixin_30449239的博客
12-09 576
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择项</title> <script...
JS学习笔记之左边列表移到到右边列表
De_Moivre的专栏
07-26 776
实现功能：1.左边的下拉框内容添加到右边的下拉框，支持多选移动，且同时将右边的下拉框对象移除；2.支持列表中项目上下位置的移动；3.效果图如下：     Html代码   &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;   &lt;HTML&gt;   &lt;HEAD&gt;...
jquery下拉框实现将左边的选项添加到右边区域
技术成就人生
11-06 5878
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
使用javascript实现单选及多选的向右和向左移动
whylyq的专栏
03-22 1386
使用javascript实现单选及多选的向右和向左移动方法 一、    实现单选及多选的向右和向左移动  "lst">      "lselect" size="10" multiple="multiple" style="width: 100px;  background-color:blue;">   选项1   选项2   选项3   选项4 
baifenbiao.rar_javascript_表格_选中 显示
09-20
在实际项目中，这样的功能可能需要扩展，比如增加多选功能，提供清除选择的按钮，或者将选中的数据存储到本地存储或发送到服务器。同时，为了增强用户体验，还可以考虑添加键盘导航，使用户可以通过键盘上下左右键来...
设置按钮的选中态表现形式
06-28
在前端开发中，我们通常会使用CSS（层叠样式表）来定义这些样式，并利用JavaScript或者jQuery等库来处理按钮的选中状态。 其次，"鼠标拖拉"功能常见于多选场景，如文件管理器或列表视图中。当用户按下鼠标左键并...
vue3和threejs单击按钮模型高亮显示
qq_41379824的博客
08-27 1658
文章目录一、在组件中引入three.js依赖的文件二、在setup函数中定义全局变量三、在setup函数中创建outlineObj (selectedObjects)，参数为选中的模型所组成的数组[]四、必须在animate函数中执行composer.render()总结感谢文章：[threejs单击选中模型高亮显示/选中模型发光](https://blog.csdn.net/qq_15023917/article/details/114366480) 一、在组件中引入three.js依赖的文件 impo
程序天下:JavaScript实例自学手册
07-08
9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑效果（二） 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...
从左边列表复制到右边列表html,JQ实现左侧列表内容移动至右侧列表出现的问题...
weixin_28928039的博客
06-17 743
部分代码如下$(function(){//双击选中项，商品移动到右列表$('#leftList option').dblclick(function(){$('#leftList option:selected').appendTo('#rightList');})//双击选中项，商品移动到左列表$('#rightList option').dblclick(function(){$('#righ...
关于js select 上移,下移,置顶,置底
qingfeng200468的博客
04-12 265
在网上搜索select排序功能代码, 有一大堆,可真正实现置顶功能的却很少,不是功能没有实现,就是速度奇慢无比,当然也可能是自己搜索能力没有过关,于是想到"求人不如己",自己奋笔直书,写完整的select排序功能,只对IE7.0和Firefox3.0进行测试通过!希望能给需要类似功能同仁提供一些帮助! &nbsp; &nbsp; &lt;!DOCTYPE HTML PUBLIC "-//W3...
jQuery选择框设置左右选择值js特效_移动左边选择的值到右边
ICode联盟
12-23 564
下载地址 js代码相当简单//移到右边 $("#add").click(function(){ //获取选中的选项，删除并追加给对方 $("#select1 option:selected").appendTo("#select2"); }); //移到左边 $("#remove").click(function(){ $("#select2 option:selected").appendTo("#select1"); }); //全部移到右边 $("#add_all").click(function(
从左边列表复制到右边列表html,JS动态的把左边列表添加到右边的实现代码(可上下移动)...
weixin_39622760的博客
06-17 409
new document 选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。北京上海山东安徽重庆福建甘肃广东广西贵州海南河北黑龙江上移下移值：function moveOption(e1, e2){try{for(var i=0;iif(e1.options[i].selected){var e = e1.options[i];e2.optio...
用JavaScript实现两个列表框的数据移动
牵挂著你是那颗我的心 飘呀飘地在你面前捉摸不定 牵挂著你是那份我的情 吹呀吹到你的眼前我的心 我不愿看到你那湿润的眼睛 怕我会忍不住疼你怕你伤心 我不愿听见你说寂寞的声音 怕我会忍不自你说我的真感情
09-19 1473
用JavaScript实现两个列表框的数据移动function addOption(fromSelectObject, toSelectObject, maxLimit){    var overMax = false;    for(i=0; i        if(fromSelectObject.options[i].selected == true){            if(maxL
java Swing界面左边表格选中后添加到右边表格
机智的三天没洗头的东瓜崽的博客
11-17 1181
java Swing界面左边表格选中后添加到右边表格 先放个效果图，看看是不是你们想要的 话不多说，直接上代码 package com.ldj.test; import java.awt.Dimension; import java.awt.FlowLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.util.Vector; import javax.swing.JBu
JS元素的左右移动
Rick的博客
03-22 3638
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 步骤分析 1. 确定事件: 点击事件 :onclick事件 2. 事件要触发函数 selectOne 3. selectO...
JS案例之选择内容左右移动
qiqi_meng的博客
08-06 1571
JS之选择内容左右移动 描述：点击左右移动按钮，将内容在左右两个盒子之间来回移动，可以全部选中移动，也可以只移动选中项 效果： HTML结构 <body> <div class="box"> <div class="left"> <button class="left_all">全选</button> <ul class="leftlist">
javascript实现组合列表框中元素移动效果
weixin_30741653的博客
04-02 81
　　应用背景：在页面中有两个列表框，需要把其中一个列表框的元素移动到另一个列表框。 　　实现的基本思想： 　　（1）编写init方法对两个列表框进行初始化； 　　（2）为body添加onload事件调用init方法； 　　（3）编写move（s1,s2）把s1中选中的选项移到s2; 　　（4）编写moveAll（s1,s2）把s1中所有的选项都移到s2. 　　（5）为按钮添...
js单击第一个按钮，将左侧选中的所有选项移动到右边
最新发布
05-25
假设左边的选项是一组带有相同类名的复选框，可以使用以下代码将选中的复选框移动到右边： ...当按钮被点击时，我们遍历所有的复选框，如果当前复选框被选中，我们就将其从左边容器中移除，并将其添加到右边容器中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值