使用bootstrap-multiselect.js实现Input多选功能

来源：互联网发布：js图片立体翻转效果编辑：程序博客网时间：2024/04/28 23:22

bootstrap-multiselect.rar

下载地址：http://download.csdn.net/download/lolhezihehe/9426270

效果图：

单选：可以针对某个option进行设置为不可选状态

多选：可以针对多个option进行设置为不可选状态

html代码：

<!DOCTYPE html><html>    <head>        <title>Test Bootstrap Multiselect</title>        <meta name="robots" content="noindex, nofollow" />        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />        <link rel="stylesheet" href="docs/css/bootstrap-3.3.2.min.css" type="text/css">        <link rel="stylesheet" href="docs/css/bootstrap-example.css" type="text/css">        <link rel="stylesheet" href="docs/css/prettify.css" type="text/css">        <script type="text/javascript" src="docs/js/jquery-2.1.3.min.js"></script>        <script type="text/javascript" src="docs/js/bootstrap-3.3.2.min.js"></script>        <script type="text/javascript" src="docs/js/prettify.js"></script>        <link rel="stylesheet" href="dist/css/bootstrap-multiselect.css" type="text/css">        <script type="text/javascript" src="dist/js/bootstrap-multiselect.js"></script>        <script type="text/javascript" src="dist/js/bootstrap-multiselect-collapsible-groups.js"></script>        <script type="text/javascript">            $(document).ready(function() {                window.prettyPrint() && prettyPrint();            });        </script>    </head>    <body data-spy="scroll" data-target="#affix"><a href="https://github.com/davidstutz/bootstrap-multiselect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>        <div class="container">            <div class="row">                               <div class="col-md-9">                    <div class="page-header">                        <h1>Bootstrap Multiselect</h1>                    </div>                    <div class="page-header">                        <h2 id="getting-started">Getting Started</h2>                    </div>                                                                                           <div class="example">                                        <script type="text/javascript">                                            $(document).ready(function() {                                                $('#example-single-selected').multiselect();                                            });                                        </script>                                        <select id="example-single-selected">                                            <option value="1">Option 1</option>                                            <option value="2" selected="selected">Option 2</option>                                            <option value="3" selected="selected">Option 3</option>                                            <option value="4" disabled="true">Option 4</option>                                            <option value="5">Option 5</option>                                            <option value="6">Option 6</option>                                        </select>                                    </div>                                                                                                                                        <div class="example">                                        <script type="text/javascript">                                            $(document).ready(function() {                                                $('#example-multiple-selected').multiselect();                                            });                                        </script>                                        <select id="example-multiple-selected" multiple="multiple">                                            <option value="1">Option 1</option>                                            <option value="2" selected="selected">Option 2</option>                                            <option value="3" selected="selected">Option 3</option>                                            <option value="4" disabled="true">Option 4</option>                                            <option value="5" disabled="true">Option 5</option>                                            <option value="6">Option 6</option>                                        </select>                                    </div>                                                                        <div class="example">                                        <script type="text/javascript">                                            $(document).ready(function() {                                                $('#example-multiple-optgroups').multiselect();                                            });                                        </script>                                        <select id="example-multiple-optgroups" multiple="multiple">                                            <optgroup label="Group 1">                                                <option value="1-1">Option 1.1</option>                                                <option value="1-2" selected="selected">Option 1.2</option>                                                <option value="1-3" selected="selected">Option 1.3</option>                                            </optgroup>                                            <optgroup label="Group 2">                                                <option value="2-1">Option 2.1</option>                                                <option value="2-2">Option 2.2</option>                                                <option value="2-3">Option 2.3</option>                                            </optgroup>                                        </select>                                    </div>                                               </div>        </div></div>    </body></html>

之前我下载这些插件，引入之后总是没有显示Input框，只有普通的下拉列表。老是碰壁，然后我变得聪明了，不用自己引入这些插件，我就copy一个插件里面的index.html进行修改，琢磨，最终发现之前为什么会现实不了该功能了，原来是路径问题，并非引入这个js或者css就可以了，而是他内部定好了哪个目录必须和哪个目录同一个文件夹，等等的关系，我们不要去改变插件原有的目录树，然后引入插件OK了。

1 0