插件介绍：bootstrap 左右移动多选框插件~Multiselect

我会带着你远行 2022-06-15 06:17 405阅读 0赞

官网：  
[http://www.jiaoben123.com/uploadfiles/demo/d19cb85fac5b4c74bb4e387852f7d23b/\#documentation][http_www.jiaoben123.com_uploadfiles_demo_d19cb85fac5b4c74bb4e387852f7d23b_documentation]

引入文件：

css:
                    <link href="statics/css/multiselect-master/style.css" rel="stylesheet" type="text/css">
    js:
                <script src="statics/js/multiselect-master/multiselect.min.js" type="text/javascript"></script>

用法：  
HTML:

<div class="row">
        <div class="col-xs-5">
            <select name="from" class="js-multiselect form-control" size="8" multiple="multiple">
                <option value="1">Item 1</option>
                <option value="2">Item 5</option>
                <option value="2">Item 2</option>
                <option value="2">Item 4</option>
                <option value="3">Item 3</option>
            </select>
        </div>
    
        <div class="col-xs-2">
            <button type="button" id="js_right_All_1" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
            <button type="button" id="js_right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
            <button type="button" id="js_left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
            <button type="button" id="js_left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
        </div>
    
        <div class="col-xs-5">
            <select name="to" id="js_multiselect_to_1" class="form-control" size="8" multiple="multiple"></select>
        </div>
    </div>

JS:

<script type="text/javascript"> jQuery(document).ready(function($) { $('.js-multiselect').multiselect({ right: '#js_multiselect_to_1', rightAll: '#js_right_All_1', rightSelected: '#js_right_Selected_1', leftSelected: '#js_left_Selected_1', leftAll: '#js_left_All_1' }); }); </script>

效果展示：  
![这里写图片描述][SouthEast]

![这里写图片描述][SouthEast 1]

资源下载：  
[http://download.csdn.net/detail/kangguowei/9852628][http_download.csdn.net_detail_kangguowei_9852628]

不怕慢就怕干，静，净，敬。

[http_www.jiaoben123.com_uploadfiles_demo_d19cb85fac5b4c74bb4e387852f7d23b_documentation]: http://www.jiaoben123.com/uploadfiles/demo/d19cb85fac5b4c74bb4e387852f7d23b/#documentation
[SouthEast]: /images/20220615/7410317945844ecda5d7b4959b98eb2d.png
[SouthEast 1]: /images/20220615/a1da6344815741e591b5523e4322b443.png
[http_download.csdn.net_detail_kangguowei_9852628]: http://download.csdn.net/detail/kangguowei/9852628

发表评论取消回复

表情：

评论列表（有 0 条评论，405人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap 插件

文章目录一、导航二、分页导航三、下拉菜单 1.用法 2.实例四、模

迷南。/ 2023年09月26日 11:49/ 0 赞/ 64 阅读

相关 Bootstrap复选框和单选按钮美化插件

[官网地址][Link 1] 需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体

青旅半醒/ 2022年09月30日 15:00/ 0 赞/ 349 阅读

相关 Bootstrap复选框和单选按钮美化插件

今天写单选框的时候，根据要求需要美化样式，原来的样式太丑了。为了不重复写轮子，想到寻找插件解决。找到一款Bootstrap复选框和单选按钮美化插件。时间紧张，简单记录。详情待整

不念不忘少年蓝@/ 2022年09月30日 14:59/ 0 赞/ 276 阅读

相关 Bootstrap模态框插件

1.基本模态框模态框（Model）是覆盖在父窗体上的子窗体，通常是显示一个单独的源的内容。用法：切换模态框插件隐藏内容 1.通过data属性：在控制器元素

不念不忘少年蓝@/ 2022年08月23日 09:54/ 0 赞/ 293 阅读

相关插件介绍：Bootstrap 下拉多选框插件Bootstrap Multiselect

官方文档:[http://davidstutz.github.io/bootstrap-multiselect/][http_davidstutz.github.io_boot

爱被打了一巴掌/ 2022年07月11日 09:12/ 0 赞/ 369 阅读

相关插件介绍：bootstrap 左右移动多选框插件~Multiselect

官网： [http://www.jiaoben123.com/uploadfiles/demo/d19cb85fac5b4c74bb4e387852f7d23b/\docu

我会带着你远行/ 2022年06月15日 06:17/ 0 赞/ 406 阅读

相关 Bootstrap模态框插件

> 模态框插件：交互式网站常见的弹框功能插件一、基本使用：使用模态框的弹窗组件需要三层div容器元素： modal（模态声明层） dialog（窗口声明层

缺乏、安全感/ 2022年06月12日 05:57/ 0 赞/ 347 阅读

相关 Bootstrap 下拉多选插件bootstrap-select

下载地址：[https://github.com/silviomoreto/bootstrap-select][https_github.com_silviomoreto

Bertha 。/ 2022年03月20日 17:38/ 0 赞/ 571 阅读

相关 bootstrap插件

（1）bootstrap-treeview：[https://github.com/jonmiles/bootstrap-treeview][https_github.com_

青旅半醒/ 2022年03月18日 03:24/ 0 赞/ 384 阅读

相关多选插件multiselect.js

方网址：[http://loudev.com/][http_loudev.com] html： <html> <head> <link href="path/...

朱雀/ 2021年03月26日 14:48/ 0 赞/ 634 阅读