JQuery multiselect的相关使用

这两天做项目需要用到多选控件,于是选择了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");

        });

效果图:

时间: 2024-11-02 16:40:34

JQuery multiselect的相关使用的相关文章

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

jquery checkbox的相关操作——全选.反选.获得所有选中的checkbox 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']&

jquery中下拉多选插件jquery.multiSelect的使用

使用multiSelect需要导入jquery.bgiframe.min.js,jquery.multiSelect.css,jquery.multiSelect.js还有几个图片. 案例 html代码: <td>部门:       <select id="departmentId" name="roleIds" style="width:180px" multiple="multiple">     

jquery.multiSelect下拉框多选

使用multiSelect需要导入jquery.bgiframe.min.js,jquery.multiSelect.css,jquery.multiSelect.js还有一些图片,详见附件. 案例 jsp代码: <td>部门:         <select id="departmentId" name="roleIds" style="width:180px" multiple="multiple">

jQuery核心之jQuery Object及其相关的常用方法

1.jQuery Object 和 原生的DOM对象之间有许多方法是不一样的,用jQuery的方法大部分情况下返回的是jQuery Object,但是jQuery也提供了一些方法可以很轻松的获取原生的DOM对象. 先来看:获取jQuery Object之一, // Selecting only the first <h1> element on the page (in a jQuery object) var headings = $( "h1" ); var first

关于jquery multiselect用法

一.jquery multiselect的作用 我们通过select标签做一个对比.select标签我相信大家应该都用过,我们做查询的时候经常会用到select做为条件进行查询,但是select有一个弊端,那就是你只能选择其中的一个条件进行筛选查询,select需要一下子选中多个条件查询,那实现起来就比较麻烦了.那么jquery multiselect就是为这个而进行处理的.这是效果图 选择之后 内容过多是这种效果 二.用法 引用js文件和css文件 jquery-ui.min.js, jque

jquery multi-select 实例demo

运行效果: 其他的不多说了,都是用的jquery.multiSelect.js组件实现的,直接看代码吧 代码下载地址: http://download.csdn.net/detail/ajavabird/9906228

JQuery操作表单相关使用总结

select下拉列表onChange事件之JQuery实现: Java代码   JQuery: $(document).ready(function () { $("#selectMenu").bind("change", function () { if ($(this).val() == "pro1") { $("#pro1").slideDown(); $("#pro2").slideUp(); }

web前端【第十二篇】jQuery文档相关操作

一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color", "#ff0000") -> 设置值 - .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值 - .css(["color

jquery插件学习相关(1)

jQuery插件机制 jQuery提供了两个用于扩展jQuery功能的方法,即jQuery.fn.extend()和jQuery.extend()方法 jQuery.fn.extend()用于封装对象方法插件 jQuery.extend()用于封装全局函数的插件和选择器插件,同时也可扩展已有的Object对象. jQuery.extend() jQuery.extend(target,obj1...objN) 常用于设置插件方法的一系列默认参数 function foo(option){ opt