select多选框改造的双框多选框

最新推荐文章于 2024-06-11 16:39:30 发布
最新推荐文章于 2024-06-11 16:39:30 发布
阅读量513 收藏
点赞数
分类专栏： HTML5 文章标签： select
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33567603/article/details/73230290
版权

代码如下

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
 </head>
 <body>
    <div class="modal-body">
        <div style="display:none;">
            <select id="item_ids" name="item_ids[]" multiple="multiple"></select>
        </div>
        <form>
            <table border="0">
            <tbody>
            <tr>
                <td>
                    <select multiple="" size="20" style="width: 230px; height: 260px" id="inner_left" name="listLeft">
                        <option value="10">127.0.0.1</option>
                    </select>
                </td>

                <td style="width: 100px">
                    <nobr></nobr>
                    <center>
                        <nobr>
                        <input type="button" class="btn" onclick="moveDualList(this.form.listRight,this.form.listLeft,false)" name="Add     <<" value="<">
                        <br>
                        </nobr>

                        <nobr>
                        <input type="button" class="btn" onclick="moveDualList(this.form.listLeft,this.form.listRight,false)" name="Add     >>" value=">">
                        <br>
                        <br>
                        <br>
                        </nobr>

                        <nobr>
                        <input type="button" class="btn" onclick="moveDualList(this.form.listRight,this.form.listLeft,true)" name="Add All <<" value="<<">
                        <br>
                        </nobr>

                        <nobr>
                        <input type="button" class="btn" onclick="moveDualList(this.form.listLeft,this.form.listRight,true)" name="Add All >>" value=">>">
                        <br>
                        </nobr>
                        <nobr>
                        </nobr>
                    </center>
                    <nobr></nobr><nobr></nobr>
                </td>

                <td>
                    <select multiple="" size="20" style="width: 230px; height: 260px" name="listRight">
                        <option value="1">192.168.0.1</option>
                        <option value="2">192.168.0.2</option>
                        <option value="3">192.168.0.3</option>
                    </select>
                </td>
            </tr>
            </tbody>
            </table>
            <button type="button" id="btn_submit">提交保存</button>
        </form>
    </div>
 </body>
</html>

<script>
    function moveDualList(srcList, destList, moveAll){
      if ((srcList.selectedIndex == -1) && (moveAll == false)){
        return;
      }
      newDestList = new Array(destList.options.length);
      var len = 0;
      for (len = 0; len < destList.options.length; len++){
        if (destList.options[len] != null){
          newDestList[len] = new Option(destList.options[len].text, destList.options[len].value, destList.options[len].defaultSelected, destList.options[len].selected);
        }
      }
      for (var i = 0; i < srcList.options.length; i++){
        if (srcList.options[i] != null && (srcList.options[i].selected == true || moveAll)){
          newDestList[len] = new Option(srcList.options[i].text, srcList.options[i].value, srcList.options[i].defaultSelected, srcList.options[i].selected);
          len++;
        }
      }
      newDestList.sort(compareOptionValues);
      for (var j = 0; j < newDestList.length; j++){
        if (newDestList[j] != null){
          destList.options[j] = newDestList[j];
        }
      }
      for (var i = srcList.options.length - 1; i >= 0; i--){
        if (srcList.options[i] != null && (srcList.options[i].selected == true || moveAll)){
          srcList.options[i] = null;
        }
      }
    }
    function compareOptionValues(a, b) {
      var sA = parseInt( a.value, 36 );  
      var sB = parseInt( b.value, 36 );  
      return sA - sB;
    }

    $('#btn_submit').click(function(){
        $('#inner_left > option').each(function(){
            $(this).attr('selected','true');
        });
        $('#item_ids').html($('#inner_left').html());

        if ($('#item_ids').val() == null||$('#item_ids').val() == '') {
            alert("请选择服务器！");
            return false;
        }

        //$(this).parents('form').submit();
    });
</script>
架构攻城狮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何设置下拉框多选以及设置多选值
09-04 4540
1.增加multiple属性值，name值加上[ ]，不加是单选例如： <select name="subtype[]" multiple style="height:100px;"> {volist name="sbtype" id="v"} <option value="{$v.id}">{$v.title}</option>
select下拉多选框
09-28
mulitselect下拉多选框，可以运行。但是有些页面不兼容，慎用
select多选框
weixin_30908707的博客
06-12 67
select多选框 效果： 代码： 1 <HTML> 2 <HEAD> 3 <TITLE>选择下拉菜单</TITLE> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 5 <META NAME="Desc...
select下拉框如何实现多选功能
最新发布
weixin_51609337的博客
06-11 330
【代码】select下拉框如何实现多选功能。
select 多选
zhuzhumutou11的博客
05-05 817
项目中用到select多选,本以为没有，竟然发现还真有，话不多说。1 页面引入下面的js css2 在select上加个multiple字段 3 实例化就可以了4  初始状态全选，默认多选（ps:我这个是缓存取，其实道理是一样的）...
select实现多选
夏至的博客
07-18 1万+
选择用select下拉框实现多选。<select multiple="multiple" ></select>
zTree实现多选下拉框
08-14
1. **配置zTree的多选功能**：在zTree的初始化配置中，需设置`check.enable = true`以启用复选框功能。此外，`check.chkStyle`属性通常设置为"checkbox"，表示使用标准的复选框样式。同时，还可以通过`check....
js商品列表多条件筛选分类菜单代码.zip
09-23
筛选菜单通常由一系列的复选框、下拉框或输入框构成，用于用户选择不同的筛选条件。 接着是`css`目录，其中的样式文件负责美化页面，使筛选菜单和商品列表呈现出理想的视觉效果。CSS选择器可以精确地定位到页面上的...
jQuery Select下拉框分类菜单多选插件.zip
09-22
但在jQuery插件中，通常会通过复选框或者自定义UI来呈现多选状态，并提供方便的API供开发者操作。 **五、jQuery插件设计** 一个典型的jQuery插件结构包括初始化函数、配置选项、事件绑定和公共方法。插件的实现...
jquery下拉多选select插件.rar
05-07
在这个插件中，下拉多选框（Multiple Select Dropdown）通常由一个普通的HTML `<select>`元素改造而成，通过`<option>`标签来定义可选项。Bootstrap风格意味着插件将遵循Bootstrap框架的样式规则，提供一致的用户...
其它控件VC源代码:multichecklistbox_src
03-17
而多选清单框（Multi-Check List Box）则允许用户同时选择多个条目，通常通过复选框与条目关联来实现这一功能。这个"multichecklistbox_src"项目提供了实现这种自定义控件的源代码，帮助开发者扩展MFC的基本控件功能...
jquery.multiSelect多选下拉框简单实例
08-30
jquery.multiSelect多选下拉框简单实例
多选下拉框（select 下拉多选）
易的博客
01-21 2275
选项1</option><option value="2">选项1</option><option value="3">选项1</option><option value="4">选项1</option><option value="5">选项1
select下拉框多选，超级好用！十分强大！
热门推荐
bokestudy的博客
05-13 10万+
正文： 先说点废话：一个需求,想把select变成下拉多选，网上查找了半天，给出的方案都是自定义一个标签，或者弄个什么ul下面li进行选择，看起来就繁琐，本人只想在select上面做文章，不得已，自己写了一个，只需要在select上加个属性即可，方便实用！ 2019.11.30之前，算是selectMultip的第一个版本，没想到用的人还不少，自然也...
js checked
小画家
08-10 591
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <style> .fs-wrap { position: relative; display: inline-block; width: 200px; font-size: 12px; line-height: 1; } .fs-label-wrap { position: rela..
文本框改造之多选下拉控件
weixin_30455661的博客
07-12 308
因客户需求，所以做了一个多选下拉控件，做之前在网上搜了各种多选下拉，包括jQuery.multiselect和一些大神写的dll控件。 但是，没用起来，没用起来，没用起来。重要的事情说三遍。 原因有二： 一、jQuery.multiselect的各种引用搞乱了套，为了不影响系统现在的平衡，所以只能作罢。因为该项目已经处于维护阶段，不想改那么多。 二、dll的控件源码看不懂，也不想看。 当...
select 下拉多选
08-02 9992
一、使用multiple-select.js和multiple-select.css实现 HTML代码： <select id='checkedLevel' style="width:120px;height:28px;" multiple="multiple"> <option value="1">选项1</option> &l...
获取select多选框的值
qq605053977的博客
03-15 723
el-select 多选框
03-23
el-select 多选框是一个基于 Element UI 组件库的下拉选择框，可以允许用户选择多个选项。它提供了以下特性和用法： 1. 多选功能：el-select 多选框可以通过设置 multiple 属性来启用多选功能，用户可以通过点击...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值