夜微凉、的博客

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
  76 随笔 :: 24 文章 :: 22 评论 :: 24万 阅读

这两天做项目需要用到多选控件,于是选择了JQuery  multiselect控件,介绍一下常用的一些相关属性。

详细地址:http://davidstutz.github.io/bootstrap-multiselect

添加引用:

页面:

复制代码
<div class="mui-input-row">
       <span class="mui-icon mui-icon-contact mui-pull-right"></span>
       <label style="color: #8f8f94;font-size: 15px !important">跟&nbsp;踪&nbsp者</label> 
       <select id="example-getting-started" multiple="multiple"> 
               @foreach (var emp in (List<SelectListItem>)ViewBag.unEmpList)
                   { 
                       <option value="@emp.Value">@emp.Text</option> 
                    }
          </select>
</div>
复制代码

JS:

复制代码
$(document).ready(function () {
            $('#example-getting-started').multiselect({ 
                nonSelectedText: '请选择跟踪者',    //默认
                filterPlaceholder: '搜索',          //搜索框内显示
                nSelectedText: ' 位跟踪者',             
                enableFiltering: true,
                includeSelectAllOption: true,       //是否自耦的
                selectAllText: '全选/全否',
                allSelectedText: '已选中所有人员',
                maxHeight: 400,                     //最大高度
                dropUp: true,                       //控件是否朝上搜索 
            });

            //取值  直接用 .val()就能取得多选中的值 
            var result = $('#example-getting-started').val();

            // 设置默认值  注意格式
            var ids = [1, 2, 3, 4, 5];
            $('#example-getting-started').val(ids); 
            $('#example-getting-started').multiselect("refresh");

        });
复制代码

效果图:

 

posted on   夜、微凉  阅读(725)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 字符编码:从基础到乱码解决
点击右上角即可分享
微信分享提示