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. 写给java开发的运维笔记

    转载至:https://github.com/biezhi/java-bible/tree/master/learn_server

  2. 在VS中添加lib的简单方法

    1.工程---属性---配置属性---VC++ Directories---General---Include Directories:加上头文件存放目录 2.VC中,切换到"解决方案视图& ...

  3. SQL归档

    /* 作用:归档3个月前的短信发送记录 创建人:zhuxiang 日期:2012-10-30 */ ALTER Proc [dbo].[Sms_Job_History_Send] As Begin D ...

  4. jquery的blur之后,focus获取不到焦点的解决办法

    一:很多童鞋可能会遇到这种情况: jquery的blur之后,focus获取不到焦点. 二:使用场景: 用户填写信息的时候,若邮箱为空,则提示 请填写邮箱,并将光标置于填写邮箱的文本框里,方便用户的再 ...

  5. 微信公众平台实现pc端网站登录

    亲测通过 1,pc端生成带有当前会话的sessionid的url(通过微信来扫描) 2,扫描后,微信浏览器将访问url,将微信浏览器中的sessionid改成通过url传过来的session(pc端) ...

  6. Unsupported major.minor version 52.0

    jdk版本错误,默认应该选择高版本的,请检查你的配置文件引用 java.exe的路径,把它改为绝对路径 分析:其他软件如oracle安装可能会自带一些低版本的jdk,然后你项目引用如果 path=ja ...

  7. Chrome 没有注册类

    妈蛋这个问题折腾了好久,百度都是噼里啪啦什么什么进入注册表什么的删除啊 操  看着难受死了 这边也有这个些 没有注册类原因什么的的百度一下就有了 解决办法 管理员身份运行CMD 输入 REG DELE ...

  8. backprop示例

    http://home.agh.edu.pl/~vlsi/AI/backp_t_en/backprop.html

  9. 【Python】Celery异步处理

    参考:http://www.cnblogs.com/znicy/p/5626040.html 参考:http://www.weiguda.com/blog/73/ 参考:http://blog.csd ...

  10. 使用axi_datamover完成ZYNQ片内PS与PL间的数据传输

    分享下PS与PL之间数据传输比较另类的实现方式,实现目标是: 1.传输时数据不能滞留在一端,无论是1个字节还是1K字节都能立即发送: 2.PL端接口为FIFO接口: PS到PL的数据传输流程: PS到 ...