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与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
three.js 如何制作魔方
Jul 31 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
php数据库连接
2006/10/09 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
php 数学运算验证码实现代码
2009/10/11 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
node.js基础知识小结
2018/02/26 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
Python3基础之函数用法
2014/08/13 Python
Python对切片命名的实现方法
2018/10/16 Python
用python写PDF转换器的实现
2020/10/29 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
yy结婚证婚词
2014/01/10 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
商务经理岗位职责
2014/08/03 职场文书
2014年药店工作总结
2014/11/20 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
python可视化之颜色映射详解
2021/09/15 Python
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS