1,下载插件

https://github.com/ehynds/jquery-ui-multiselect-widget

2,效果:

3.引用文件:

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/jquery_multiselect/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/jquery_multiselect/style.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/jquery_multiselect/prettify.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/jquery_multiselect/jquery-ui.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery_multiselect/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery_multiselect/jquery.multiselect.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery_multiselect/prettify.js"></script>

4. 标签:

    <select name="levelCondition" id="levelCondition" multiple="multiple" style="width:100px">
                                    <option value="STD">标准</option>
                                    <option value="MIN">迷你</option>
                                    <option value="VIP">尊贵</option>
                                    <option value="GVIP">VIP白金</option>
                                </select>

5.js

$(document).ready(function (){
        $("select[multiple]").multiselect({
            selectedList: 4
        });
        
        
        
        
        //初始化默认选中已有的选项,sceneIdList是要默认选中的值
           var sceneIdArr ='<s:property value="levelConditionStr"/>'.split(",");
        $('#levelCondition option').each(function (i, content) {
         //   alert(i+"***"+content.value);
            if ($.inArray($.trim(content.value), sceneIdArr) >= 0) {
                this.selected = true;
            }
        });
        //设置选中值后,需要刷新select控件
        $("#levelCondition").multiselect('refresh');
        
        });

jQuery multiselect的使用的更多相关文章

  1. jquery.multiselect 多选下拉框实现

    第一步:链接下列文件,如果没有,到此网页下载 https://github.com/ehynds/jquery-ui-multiselect-widget,此插件基于jquery ,所以jquery的 ...

  2. [插件]jQuery multiselect初始化及默认值修改

    下载地址:http://pan.baidu.com/s/1dE2daSD 1.Jquery多选下拉列表插件jquery multiselect功能介绍及使用 http://www.jb51.net/a ...

  3. JQuery multiselect的相关使用

    这两天做项目需要用到多选控件,于是选择了JQuery  multiselect控件,介绍一下常用的一些相关属性. 详细地址:http://davidstutz.github.io/bootstrap- ...

  4. js:jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery multi-select 实例demo

    运行效果: 其他的不多说了,都是用的jquery.multiSelect.js组件实现的,直接看代码吧 代码下载地址: http://download.csdn.net/detail/ajavabir ...

  6. jquery multiselect使用示例

    多选下拉框开源组件:https://github.com/ehynds/jquery-ui-multiselect-widget html部分: <select multiple id=&quo ...

  7. Jquery 多选下拉列表插件jquery multiselect

    有一个多选的需求,在网上找到了这个插件:multiselect https://github.com/ehynds/jquery-ui-multiselect-widget csdn博客上有这个插件的 ...

  8. JQuery MultiSelect(左右选择框)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery multiselect控件

    http://www.erichynds.com/blog/jquery-ui-multiselect-widget

随机推荐

  1. 学习opencv

    图像缩放 cv::Mat src_img = cv::imread(); ; cv::Mat dst_img1; cv::Mat dst_img2(src_img.rows*0.5, src_img. ...

  2. javascript 中正则表达式应用

    <script type="text/javascript"> var str="<script type='text/javascript'> ...

  3. 从委托到Lambda

    写下这篇文章的时候已经是工作三年,突然发现自己从始至终都没有学习过任何东西,突然想学点东西又不知道从何而写那只能一个个基础重新学习. 委托 什么是委托? 委托是一个类,它定义了方法的类型,使得可以将方 ...

  4. 常用SQL Server日期格式化

    Select CONVERT(varchar(100), GETDATE(), 8): 10:57:46 Select CONVERT(varchar(100), GETDATE(), 24): 10 ...

  5. iOS开发 - OC - PCH文件使用

    一. PCH文件的作用 Xcode中,PCH文件在程序编译的时候会自动包含进去.也就是说PCH中的内容是全局的,可以使用在程序的任何地方,通过这个特性,我们可以概括到PCH的作用有以下几个方面: (1 ...

  6. 新做的一个基于OPENGL的gui库

    #include <BGE/All> ,text);     button->setName(name);     button->setSize(Vector2f(,)); ...

  7. JavaScript笔记基础篇(三)

    针对前段JS获取当前时间或者对时间数据处理方法汇总: javascript 字符串转化为日期 Java代码   var s="2010-5-18 12:30:20"; var t= ...

  8. tracert-命令小结

          前言:今天在阅读“Web性能权威指南”这本书的时候,发现 tracert 这个命令挺有意思的,在分析网络性能瓶颈的时候也能使用的到,在此就小记一笔以备后用. 1:作用 tracert 是一 ...

  9. org.springframework.dao.InvalidDataAccessApiUsageException: Parameter value [41] did not match expected type [java.lang.Integer (n/a)];

    题记:以前记录过一些自己遇到的BUG,这个行为,让我一看报错的提示信息就能定位到问题的所在,后来记得比较多了,好多是重复性的再加上比较忙就没有详细的记录了,今天的工作量比较小,就顺便记录一下,以便以后 ...

  10. onethink入门笔记(一)

    由于公司需求所以大概花了一个星期搞了一个一个基于onethink的数据管理平台demo不得不说onethink这个基于thinkphp3.2.3的框架还是很棒的 让我这个没基础过php的人也能在一星期 ...