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 相关文章推荐
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
通过扫描二维码打开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 字符串长度判断效率更高的方法
2014/03/02 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
对python调用RPC接口的实例详解
2019/01/03 Python
python 创建一维的0向量实例
2019/12/02 Python
pytorch forward两个参数实例
2020/01/17 Python
python机器学习库xgboost的使用
2020/01/20 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
请介绍一下WSDL的文档结构
2013/03/17 面试题
门卫工作岗位职责
2013/12/17 职场文书
火箭队口号
2014/06/18 职场文书
2015年中秋寄语
2015/07/31 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
个人向公司借款协议书
2016/03/19 职场文书
实习报告怎么写
2019/06/20 职场文书
七年级话题作文之执着
2019/11/19 职场文书