jquery chosen 插件多选初始化

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="../css/chosen.css" rel="stylesheet" /> <!--引入chosen.css-->
    <script src="../js/jquery-1.10.2.js"></script> <!--引入jquery-*.js-->
    <script src="../js/chosen.jquery.js"></script> <!--引入chosen.jquery.js-->
</head>
<body>
    <select data-placeholder="Choose a Country..." class="chzn-select" multiple style="width:350px;" id="dl_chose2">
        <option value=""></option>
        <option value="1" >a</option>
        <option value="2">b</option>
        <option value="3">c</option>
        <option value="4">d</option>
        <option value="5">e</option>
        <option value="6">f</option>
        <option value="7">g</option>
        <option value="8">h</option>
        <option value="9">i</option>
    </select>
    <!--<a onclick="chose_mult_set_ini(‘#dl_chose2‘,‘1,3,5,8‘);" href="javascript:;;">Set a,c,e,h to Chose Mult-Select</a>-->

    <script language="javascript">
        // 多选 select 数据初始化
        function chose_mult_set_ini(select, values) {
            var arr = values.split(‘,‘);
            var length = arr.length;
            var value = ‘‘;
            for (i = 0; i < length; i++) {
                value = arr[i];
                $(select + " option[value=‘" + value + "‘]").attr(‘selected‘, ‘selected‘);
            }
            $(select).trigger("liszt:updated");
        }

        $(document).ready(function () {
            // 如果要初始化已选中的项,需要在调用chosen()函数之前调用chose_mult_set_ini()函数
            // 设置<select>的<option>属性selected=‘selected‘,这样chosen()函数被调用时,相应项会显示在框中
            chose_mult_set_ini(‘#dl_chose2‘, ‘1,3,5,8‘);

            //初始化
            $(".chzn-select").chosen();
        });
    </script>
</body>
</html>

  

时间: 2024-10-11 05:28:46

jquery chosen 插件多选初始化的相关文章

JQuery chosen插件,实现select多选

步骤:1.js 2.在select标签上添加 multiple="multiple" 属性 3.添加class=" chosen-select" 属性 即可实现多选 默认值选定: 1.获取标签默认值,根据格式拆分数据 2.使用 $('.chosen-select').chosen({ allow_single_deselect : true }); $('.chosen-select').trigger("liszt:updated"); eg:

jquery.chosen.js下拉选择框美化插件项目实例

由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生变化.为了界面的美观,不得已查资料寻找另外的插件. 使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果 完成效果如下 实现步骤如下 1.导入相关文件 <link rel="stylesheet" href="${ctxStatic}/css/chos

实现多选和搜索过滤功能的jQuery下拉列表框插件

Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件.通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择. 在线预览   源码下载 使用方法 使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css.jQuery和fm.selectator.jquery.js文件. <link rel="stylesheet" href="fm.selectator.jquery.css&qu

JavaScript之jQuery-8 jQuery 使用插件(zTree树插件、jQuery UI插件)

一.jQuery zTree树控件 zTree介绍 - zTree 是利用jQuery的核心代码,实现一套能完成常用功能的Tree插件 - 兼容IE.FireFox.Chrome 等主流浏览器 - 支持 JSON 数据 - 支持一次性静态生成和Ajax异步加载两种方式 - 支持tree的节点移动.编辑.删除 zTree使用步骤 - step 1: 下载zTree相关文件(js.css) - 下载地址: http://www.ztree.me/ - step 2: 引入相关文件 - css: 样式

jQuery Form插件详解

<script src="js/jquery.form.js" type="text/javascript"></script> Jquery Form Plugin是jquery最重要的插件之一,它利用AJAX技术在不引起页面刷新的情况下POST表单.主要有两个方法:ajaxform和 ajaxsubmit.它会自动收集表单元素内容,决定如何管理提交进程.这两个方法支持多重选择.我想AJAX方式的表单应用再没有比这个插件更简单易用的了. 先

jQuery 常用插件和UI插件 总结笔记

1. jQuery 常用插件 (1). 表单验证插件--validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({options});其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置. Jquery Validate 验证规则 (1)required:true 必输字段 (2)remote:"check.

jQuery常用插件与jQuery使用validation插件实现表单验证实例

jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . pickadate.  Echarts.chosen.(编辑器插件) ckeditor在百度上都可以直接搜索 表单校验 jQuery插件validation:https://jqueryvalidation.org/ validation是一个基于jQuery的插件,里面有了jQuery的一些函数

Jquery Media插件使用,解决在线预览及打开PDF文件

用到过PDF的媛媛and猿猿们,总会发现这大千世界之万能播放器插件,总能少了对媒体控制的接口. 你总会发现PDF无法像img图片一样正常加载展现出来,那么我们在通用语法的基础上拓展出了适用于预览及打开的PDF插件便于开发应用. 最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了. 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverl

bootstrap iCheck插件 全选和获取value值的解决方法

在使用jQuery iCheck 插件的时候遇到了一个问题,就是当我们使用普通的js全选功能无效了. $("#checkall").click(     function(){         if(this.checked){             $("input[name='checkname']").each(function(){this.checked=true;});         }else{             $("input[