jquery.multiselect多选下拉框实现代码


Posted in Javascript onNovember 11, 2016

本文实例为大家分享了jquery.multiselect多选下拉框的实现方法,供大家参考,具体内容如下

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

<link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/style.css" />
<link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/prettify.css" />

<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquerymultiselect/prettify.js"></script>
<script type="text/javascript" src="~/Scripts/jquerymultiselect/jquery.multiselect.min.js"></script>

第二步:定义html代码

<select name="Users" multiple="multiple" id="select_users">
   @foreach (DModel.Model.User item in ViewBag.users)
   {
   if (Model.Users.Contains(item.Name))
   {
    <option value="@item.Name" selected="selected">@item.Name</option>
   }
   else
   {
    <option value="@item.Name">@item.Name</option>
   }
   }
  </select>

第三步:加载插件渲染

<script>
 
 $(function () {
 $("#select_users").multiselect({
  noneSelectedText: "==请选择==",
  checkAllText: "全选",
  uncheckAllText: '全不选',
  selectedList: 5
  
 });
 });


</script>

第四步:刷新页面查看效果

 jquery.multiselect多选下拉框实现代码

至此,基本完成。接下来是取值和赋值.

取值:$("#select_users").val() ;返回的是数组。因为我这边是用Ajax.BeginForm的前台页面,所以不需要取值

赋值:在第二步中已经实现赋值,其他的赋值办法没有找到。

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript基础语法介绍
Feb 28 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
通过扫描二维码打开app的实现代码
Nov 10 #Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 #Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 #Javascript
jquery日历插件e-calendar升级版
Nov 10 #Javascript
Vue.js开发环境搭建
Nov 10 #Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 #Javascript
javascript中的后退和刷新实现方法
Nov 10 #Javascript
You might like
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
Python随机生成数模块random使用实例
2015/04/13 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
python web框架学习笔记
2016/05/03 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
党建目标管理责任书
2014/07/25 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
运动会班级前导词
2015/07/20 职场文书
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python