【JS】:关于select的multiple的JS复选使用

最新推荐文章于 2023-05-22 17:02:23 发布
VIP文章 最新推荐文章于 2023-05-22 17:02:23 发布
阅读量3.9k 收藏 2
点赞数
分类专栏： web开发 文章标签： select javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23100787/article/details/72820293
版权

直接看图，然后贴代码
这里写图片描述

代码如下，JS里面做主要的控制，看着看着就明白了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>角色分配</title>
<!-- 引入js文件 -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">       
        var leftInputLength = 0;
        var rightInputLength = 0;
        $(function(){
    
            var optionsOverAll = $("#select11").children();
            var r_optionsOverAll=$("#select2").children();
            leftInputLength = $("#unBindKey").val().length;
            rightInputLength = $("#bindKey").val().length;
            $("#select1").append(optionsOverAll);

            //移到右边
            $('#add').bind('click', function() {
    
                //获取选中的选项，删除并追加给对方
                $('#select1 option:selected').appendTo('#select2');
                r_optionsOverAll=$("#select2").children();
            });
            //移到左边
            $('#remove').bind('click', function() {
    
                $('#select2 option:selected').appendTo('#select1');
                optionsOverAll=$("#select1").children();    
            });
            //全部移到右边
            $('#add_all').bind('click', function() {
    
                $('#select1 option').appendTo('#select2');
                r_optionsOverAll=$("#select2").children();

            });
最低0.47元/天 解锁文章
seen_in_hw
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
编辑表格甘特图.rar
11-25
根据项目需要，最近编写的基于Jquery-UI的甘特图表和编辑表格插件，可根据项目选项，自动生成甘特图表，最小安排时间以10分钟为间隔，并可通过拖动安排进度条进行时间调整，每一行进度条可有多种状态，操作方便灵活。该插件提供动态数据接口，数据可直接从服务器获取，进度修改可同时同步到数据库中。共资源提供了静态数据的演示功能，代码已经过严格测试。不足之处，安排进度条在拖动、改变时长过程中，有相互重叠现象，欢迎广大网友提出宝贵意见！
JS select标签复选
04-07
JS select 标签 可多选可单选。需要加载CSS和JS，DOME包含，前提需要加载JQ
select标签添加multiple属性后，页面呈现的样式发生改变，如何修改
积累点滴、持续总结、进而成长
03-13 9411
select标签当添加multiple属性后，是指明该下拉框可以进行多选，但是添加上multiple属性后，页面的呈现是样式会发生改变 也就是 页面会将所有的下拉框的值全部展示出来 此时，需要在select标签的内部再次添加属性：size=“” 里面的数值根据select中有几个值而定 这样基本样式可以改变 进行回填的时候，数值也不会再次发生改变 代码如下： select id="
原生js multiple实现多选
IT博客技术分享
06-01 3157
使用方法还是原来的步骤：1、引入js文件，2、在select标签上添加属性multip，然后调用方法即可（只有两步哦！） 可以先访问一下这里哟：演示地址（不想访问也可以往下读） 先上图： 这个是选中后的效果，我们用的是select标签，选中后子标签会变成蓝色，如果想取消，再点击一下即可取消。 取值，调用selectMultip.getVal("22")方法即可： 赋值，调用selectMultip.setVal(id,data)即可，第二个参数类型可以是字符串或者数组,如图： 具体取值、赋值、.
多选下拉框实现方式
最新发布
m0_38051458的博客
05-22 3908
前端插件 select 多选框
[jQuery]选择框(select),多选取值(multiple)
jameskaron的专栏
03-29 2137
'#message_delivery_status option:selected').each(function(){ status.push($(this).val()) }) return status.join(","); }   js方式: function getMsgDelStaValue() { var status=[]; var obj = document.getElementById("xxxx");
JavaScript 多选、全选、反选
ximingx
12-06 497
JavaScript 点击选择
用javascript实现不按Ctrl实现Multiple Select多选
10-30
用javascript实现不按Ctrl实现Multiple Select多选
js checkbox(复选框) 使用集锦
01-19
function selectAll() //全选 { var objs = document.getElementsByName(‘twId’); var i; for(i = 0; i < objs.length; i++) { if(objs[i].type == “checkbox”) { objs[i].checked = true; } } } function ...
js获取checkbox复选框选中的选项实例
12-08
有关javascript 获取checkbox复选框的实例数不胜数。 js实现： var form = document.getElementById("form2"); var field = form.elements["test2"]; var option = Dining.getSelectedOption(form, field); var ...
multiple-Select.js
02-07
多选框要用到的js multiple-Select.js 用的时候引用到文件中
下拉多选select multiple
07-11
boostrap下拉控件，支持选择多个下拉内容，并可搜索下拉内容
js multiple全选与取消全选实现代码
12-11
代码如下:$(“select”).change(function(){    var n = $(this).children().length;    var obj;    var i = 1;       $(this).children().each(function(){     if(i == n)     {      alert($(this).text());     }     i++;    });   });综合以上二法，本人轻易得出了自己想要的效果，如下： 代码如下:function selectall(){ $(“select”).children().each(f
selectFile.js:一个让您自定义浏览按钮JavaScript函数
05-16
selectFile.js 一个让您自定义浏览按钮JavaScript函数 介绍 一个JavaScript函数，可让您自定义浏览按钮及其选择文本。 众所周知，浏览按钮<input type=file>不能直接自定义。 此功能仅使用普通输入按钮作为...
原生js实现select多选
weixin_45428021的博客
11-09 2443
【代码】原生js实现select多选。
multiple-select多选框使用记录
chenfeiwanghan的博客
02-16 942
("#cf").multipleSelect("getSelects", "text") 获取下拉框text值，“，拼接”$("#cf").multipleSelect("getSelects") 获取下拉框value值，“，拼接”3.动态设置属性后，最后也需要设置，否则在下拉框中无法查看数据。5.清空下拉框内容，一定('refresh');4.重置下拉框数据（下拉框内容不清空）
JavaScript给多选的select(multiple)赋值
festone000的专栏
08-01 5548
$(".CourseControl").find("option[value=8997]")[0].selected = true; $(".CourseControl").find("option[value=8990]")[0].selected = true; //document.getElementById("cph_CourseControl")[1].selected = t...
multiple-select下拉多选框使用（新增）
taogunet的博客
02-02 3620
因一老项目需要改造原select选择框为多选框，选定使用multiple-select完成。 官方示例地址：http://multiple-select.wenzhixin.net.cn/examples git资源地址：https://github.com/wenzhixin/multiple-select 需要再代码中引入文件 multiple-select.min.css multiple-select.min.js multiple-select-zh-CN.min.js （如不引入，全选会显示se
jquery插件 selectMultip插件 实现select下拉框多选功能效果，选中选项 逗号分隔显示
夜阑珊妖妖
07-31 964
效果图： 这个博客描述的非常好，我就不复制粘贴了 网址如下： 转载地址：https://blog.csdn.net/bokestudy/article/details/90177144 效果演示地址：http://langligelanglanglang.gitee.io/a_js_game__only_one_html_page/multselect.html ...
使用 HTML、CSS 和 JavaScript 来编写一个下拉多选复选框
03-23
好的，我可以为您提供一个基本的下拉多选复选框的实现代码。HTML 部分如下： ``` 选择您喜欢的水果： <select id="fruits" multiple> 苹果 香蕉 橙子 葡萄 </select> ``` CSS 部分如下： ``` select[multiple...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值