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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
js禁止表单重复提交
Aug 29 Javascript
javascript实现点亮灯泡特效示例
Oct 15 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维护文件系统
2006/10/09 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
php获取url参数方法总结
2014/11/13 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
python cookielib 登录人人网的实现代码
2012/12/19 Python
python读写ini文件示例(python读写文件)
2014/03/25 Python
Python中实现的RC4算法
2015/02/14 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
PyTorch中的C++扩展实现
2020/04/02 Python
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
公务员党员评议表自我鉴定
2014/09/14 职场文书
生产现场禁烟通知
2015/04/23 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
JS实现九宫格拼图游戏
2022/06/28 Javascript