JS组件中bootstrap multiselect两大组件较量

网络编程 2024/11/19 佚名

3 2 1

两个这种组件，大体样式和功能基本相同，本文就来带领大家看看这两个组件的用法。

一、组件说明以及API
1、第一个组件——multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示，我们放在后面。

2、第二个组件——bootstrap-multiselect。这个组件风格和第一个非常相似，文档也挺全面。

二、Multiple-select组件
1、组件说明
这个组件需要的浏览器支持如下：

IE 7+
Chrome 8+
Firefox 10+
Safari 3+
Opera 10.6+

还好，一般主流的浏览器都能够支持。

2、效果预览
（1）原始的MultiSelect

（2）初始化的Multiple Select

（3）设置选中和禁用

（4）设置分组

（5）设置未选中的初始值：请选择

（6）初始化成单选

（7）设置组件的筛选功能

3、代码示例
既然是bootstrap的组件，肯定需要bootstrap的支持。我们来看看需要引用的js

 @*Jquery*@
 <script src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js">

（1）原始的初始化


<label class="control-label col-xs-1" for="sel_search_orderstatus">多选站点</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
    <option value="0">未排产</option>
    <option value="5">已排产</option>
    <option value="10">已锁定</option>
    <option value="25">在制</option>
    <option value="20">订单提交</option>
    <option value="30">订单删除</option>
    <option value="50">订单报废</option>
    </select>
   </div>





$(function () {
 $('#sel_search_orderstatus').multipleSelect();
})



（2）设置选中和禁用


<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
    ......
    </select>
   </div>
$(function () {
 $('#sel_search_orderstatus2').multipleSelect();
})


（3）设置分组和初始值


<label class="control-label col-xs-1" for="sel_search_orderstatus3">分组</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
    <optgroup label="未上线">
     <option value="0">未排产</option>
    </optgroup>
    <optgroup label="已上线">
     <option value="5">已排产</option>
     <option value="10">已锁定</option>
     <option value="25">在制</option>
     <option value="20">订单提交</option>
    </optgroup>
    <optgroup label="异常">
     <option value="30">订单删除</option>
     <option value="50">订单报废</option>
    </optgroup>
    </select>
   </div>

$(function () {
 $('#sel_search_orderstatus3').multipleSelect({
 placeholder: "请选择"
 });
})


（4）单选


<label class="control-label col-xs-1" for="sel_search_orderstatus4">单选</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus4" style="width:150px" multiple="multiple">
    .......
    </select>
   </div>
$(function () {
 $('#sel_search_orderstatus4').multipleSelect({
 placeholder: "请选择",
 single: true
 });
})


（5）筛选


<label class="control-label col-xs-1" for="sel_search_orderstatus5">筛选</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus5" style="width:150px" multiple="multiple">
    ......
    </select>
   </div>
$(function () {
 $('#sel_search_orderstatus5').multipleSelect({
 placeholder: "请选择",
 filter: true
 });
})



（6）如果你的multiple select不想要默认的初始值，可以在初始化的时候去设置他们的值。如下是源码里面的默认参数列表。

三、Bootstrap-multiselect组件

1、代码示例

初始化的过程和上面的类似，首先引用文件。


<script src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js">

（1）最原始的初始化


 <label class="control-label col-xs-1" for="sel_search_orderstatus">多选站点</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
    <option value="0">未排产</option>
    <option value="5">已排产</option>
    <option value="10">已锁定</option>
    <option value="25">在制</option>
    <option value="20">订单提交</option>
    <option value="30">订单删除</option>
    <option value="50">订单报废</option>
    </select>
   </div>

$(function () {
 $('#sel_search_orderstatus').multiselect();
});


（2）设置选中和禁用


<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
    <option value="0">未排产</option>
    <option value="5" selected="selected">已排产</option>
    <option value="10" selected="selected">已锁定</option>
    <option value="25" disabled="disabled">在制</option>
    <option value="20" disabled="disabled">订单提交</option>
    <option value="30" disabled="disabled" selected="selected">订单删除</option>
    <option value="50">订单报废</option>
    </select>
   </div>





（3）分组


<label class="control-label col-xs-1" for="sel_search_orderstatus3">分组</label>
   <div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
    <optgroup label="未上线">
     <option value="0">未排产</option>
    </optgroup>
    <optgroup label="已上线">
     <option value="5">已排产</option>
     <option value="10" selected="selected">已锁定</option>
     <option value="25" disabled="disabled">在制</option>
     <option value="20">订单提交</option>
    </optgroup>
    <optgroup label="异常">
     <option value="30">订单删除</option>
     <option value="50">订单报废</option>
    </optgroup>
    </select>
   </div>

$(function () {
 $('#sel_search_orderstatus3').multiselect({
 enableCollapsibleOptGroups: true
 });
});



其他效果的代码就不一一展示了，代码很简单，看看文档基本没啥问题。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程
Bootstrap实战教程

以上就是两种多选组件的效果展示以及简单的代码示例。至于哪种更好全凭自己的感觉，使用起来都挺简单，功能基本类似，希望这篇文章对大家的学习有所帮助。

JS,bootstrap,multiselect

标签：

JS,bootstrap,multiselect

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无争山庄资源网 Copyright www.whwtcm.com

评论“JS组件中bootstrap multiselect两大组件较量”

JS组件中bootstrap multiselect两大组件较量

暂无“JS组件中bootstrap multiselect两大组件较量”评论...

www.whwtcm.com 无争山庄资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月19日

JS组件中bootstrap multiselect两大组件较量

JS,bootstrap,multiselect

WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)

JS组件Form表单验证神器BootstrapValidator

评论“JS组件中bootstrap multiselect两大组件较量”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接