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

2024-11-30 15:47:04

本文实例为大家分享了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>

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

jquery实现下拉框多选方法介绍

一.说明本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下二.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w
jQuery实现下拉框多选 jquery-multiselect 的实例代码

先给大家展示下效果图: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="../assets/style.css" /&g
一个简单的jquery的多选下拉框(自写)

今天做的项目要用到多选的下拉框,开始想在网上找一个插件用用,可是,网上的插件看起来都比较杂乱,我参考了网上的一些插件,自己用jquery写了一个多选下拉框,js写得比较简洁.代码如下. js代码复制代码代码如下: (function(){ $.fn.extend({ checks_select: function(options){ jq_checks_select = null; $(this).click(function(e){ jq_check = $(this); //jq_che
jquery multiSelect 多选下拉框

$("#id").multiSelect({ oneOrMoreSelected: '*',selectAll:false,noneSelected:'默认显示' }); Usage: $('#id').multiSelect( options, callback ) Options: selectAll - whether or not to display the Select All option; true/false, default = true selectAllText
利用Jquery实现可多选的下拉框

首先下载jquery.multiselect.js 的插件然后复制下列代码,只需改下路径就可以实现可多选下拉框.如果好用还请多多支持! 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://w
jQuery对下拉框,单选框,多选框的操作

下拉框: //得到下拉菜单的选中项的文本(注意中间有空格)var cc1 = $(".formc select[@name='country'] option[@selected]").text();//得到下拉菜单的选中项的值var cc2 = $('.formc select[@name="country"]').val();//得到下拉菜单的选中项的ID属性值var cc3 = $('.formc select[@name="country"
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴
jquery.multiselect多选下拉框实现代码

本文实例为大家分享了jquery.multiselect多选下拉框的实现方法,供大家参考,具体内容如下第一步:链接下列文件,如果没有,到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的基本文件都需要引用 <link rel="stylesheet" type="text/css" href="~/Scripts/jquerymult
jQuery自定义多选下拉框效果

项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好通过$.fn 向jQuery添加新的方法下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式代码如下: 1.效果图 2.代码 <div id="demo" class="dropdown-container"> <div class="dropdown-display"> <span></span>
jquery取消选择select下拉框示例代码

有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: 复制代码代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()"> <option value="">全部</option>
基于jquery的网页SELECT下拉框美化代码

1.解决了有些select 美化代码,无法触发原有select 控件的onchange 事件问题. 2.允许多次调用 $("...").selectCss(),以解决Select的options更新后无法同步的问题. 使用方法如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
Bootstrap select多选下拉框实现代码

前言项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没有中文的.对付看吧.有机会每个方法实践一下,会总结的.我自己也等着呢. 需要引用的它们  <link rel="stylesheet" href="https://cdnjs.cl
ASP.NET MVC实现多选下拉框

借助Chosen Plugin可以实现多选下拉框. 选择多项: 设置选项数量,比如设置最多允许2个选项: Model模块考虑到多选下拉<select multiple="multiple"...></select>选中项是string数组,Model应该这样设计: using System.Collections.Generic; using System.Web.Mvc; namespace MvcApplication1.Models { public c
ASP.NET MVC实现多选下拉框保存并显示

在"ASP.NET MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽车品牌. 关于车迷的Model: namespace MvcApplication1.Models { public class CarFan { public int Id { get; set; } public string Name { get; set; } public strin

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

相关推荐

随机推荐