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 相关文章推荐
心扬JS分页函数代码
Sep 10 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
bootstrap table实例详解
Jan 06 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 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断点续传之文件分割合并详解
2016/12/13 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python使用sorted排序的方法小结
2017/07/28 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python实现海螺图片的方法示例
2019/05/12 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
python zip()函数使用方法解析
2019/10/31 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
白酒市场开发计划书
2014/01/09 职场文书
机关保密承诺书
2014/06/03 职场文书
环保宣传标语
2014/06/12 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
安全生产协议书
2016/03/22 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书