这两天做项目需要用到多选控件,于是选择了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: , //最大高度
dropUp: true, //控件是否朝上搜索
}); //取值 直接用 .val()就能取得多选中的值
var result = $('#example-getting-started').val(); // 设置默认值 注意格式
var ids = [, , , , ];
$('#example-getting-started').val(ids);
$('#example-getting-started').multiselect("refresh"); });

效果图:

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

  1. js:jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jquery.multiselect 多选下拉框实现

    第一步:链接下列文件,如果没有,到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的 ...

  3. jQuery multiselect的使用

    1,下载插件 https://github.com/ehynds/jquery-ui-multiselect-widget

  4. [插件]jQuery multiselect初始化及默认值修改

    下载地址:http://pan.baidu.com/s/1dE2daSD 1.Jquery多选下拉列表插件jquery multiselect功能介绍及使用 http://www.jb51.net/a ...

  5. jquery multi-select 实例demo

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

  6. js进阶 13-6 jquery动画效果相关常用函数有哪些

    js进阶 13-6 jquery动画效果相关常用函数有哪些 一.总结 一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...

  7. Jquery 多选下拉列表插件jquery multiselect

    有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的 ...

  8. jQuery的select相关操作

    例: <select class="selector" id="selector"></select> 1.设置value为pxx的项选 ...

  9. jquery multiselect使用示例

    多选下拉框开源组件:https://github.com/ehynds/jquery-ui-multiselect-widget html部分: <select multiple id=&quo ...

随机推荐

  1. jQuery Deferred(http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html)

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 用jquery判断当前显示器的分辨率,加载不同CSS

    <link rel="stylesheet" type="text/css" id="css"><script langu ...

  3. 浅析WINFORM工具条的重用实现

    一直以来,我都想看看别人家的工具栏重用(图1)到底是如何实现的,但在网上搜索了很久都没有找到过,即使找到一些程序,要么就是把这个工具栏写在具体的画面(图2),要么就是没有源代码的, 我在想,是否别人也 ...

  4. 前向否定界定符 python正则表达式不匹配某个字符串 以及无捕获组和命名组(转)

    [编辑] 无捕获组和命名组 精心设计的 REs 也许会用很多组,既可以捕获感兴趣的子串,又可以分组和结构化 RE 本身.在复杂的 REs 里,追踪组号变得困难.有两个功能可以对这个问题有所帮助.它们也 ...

  5. PL/pgSQL多输出参数例子

    例子一,不带returns: postgres=# CREATE FUNCTION sum_n_product(x int, y int, OUT sum int, OUT prod int) AS ...

  6. android 根据SD卡中图片路径读取并显示SD中的图片——源代码

    package com.guo; import java.io.File; import android.app.Activity; import android.graphics.Bitmap; i ...

  7. 【ASP.NET】C# 将HTML中Table导出到Excel(TableToExcel)

    首先,说下应用场景 就是,把页面呈现的Table 导出到Excel中.其中使用的原理是 前台使用ajax调用aspx后台,传递过去参数值,导出.使用的组件是NPOI. 前台调用: <script ...

  8. Codeforces Gym 100463E Spies 并查集

    Spies Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100463/attachments Desc ...

  9. [C++基础]随机数,随机种子数

    #include <stdlib.h> #include <iostream> #include <ctime> using namespace std; void ...

  10. 【JavsScript】当 JavaScript 从入门到提高前需要注意的细节:变量部分

    在javaScript中变量使用var声明的变量是当前作用域的变量,不使用var声明的则肯定是全局变量. http://msdn.microsoft.com/zh-cn/library/dn64545 ...