Jquery 插件 chosen_v1.8.7 下拉复选框带搜索功能

地址：https://harvesthq.github.io/chosen/

效果：

因为只需要这个功能，就只研究这个功能了，代码：

<!doctype html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>

<!--         <link rel="stylesheet" href="docsupport/style.css"> -->

    <!--      <link rel="stylesheet" href="docsupport/prism.css"> -->

        <link rel="stylesheet" href="chosen.css">

        <meta http-equiv="Content-Security-Policy" content="default-src &apos;self&apos;; script-src &apos;self&apos; https://ajax.googleapis.com; style-src &apos;self&apos;; img-src &apos;self&apos; data:">

    </head>

    <body>

        <form>

                            <em>Into This</em>

                            <select data-placeholder="Choose a Country..." class="chosen-select" multiple tabindex="4">

                                <option value=""></option>

                                <option value="United States">United States</option>

                                <option value="United Kingdom">United Kingdom</option>

                                <option value="Afghanistan">Afghanistan</option>

                                <option value="Aland Islands">Aland Islands</option>

                                <option value="Albania">Albania</option>

                                <option value="Algeria">Algeria</option>

                                <option value="American Samoa">American Samoa</option>

                                <option value="Andorra">Andorra</option>

                                <option value="Angola">Angola</option>

                            </select>

            <script src="docsupport/jquery-3.2.1.min.js" type="text/javascript"></script>

            <script src="chosen.jquery.js" type="text/javascript"></script>

            <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>

            <script src="docsupport/init.js" type="text/javascript" charset="utf-8"></script>

        </form>

    </body>

</html>

以上js和css都要引入才可以

如果select的option是动态生成的如：

    function getzhr() {

        jQuery.support.cors = true;//ie请求数据

        $.ajax({

            url:‘’',

            type: 'post',

            async: true,

            data: {},

            dataType: 'json',

            success: function (res) {

                if (!res['MSG']) {

                    tbzhr = res['data'];

                   if(!tbzhr){}

                   else{

                       var zhroption='';

                       $(".chosen-select").html("");

                       for(var i=0;i<tbzhr.length;i++){

                           zhroption+='<option value="'+tbzhr[i]['name']+'">'+tbzhr[i]['name']+'</option>';

                       }

                       $(".chosen-select").append(zhroption);

                 $(".chosen-select").trigger("chosen:updated");

                 $(".chosen-container").attr("style"," min-width: 400px;max-width:550px;");

                   }

                }

            },

            error: function (res) {

            }

        });

    }

因为引入了以后发现生成的宽度始终是0，所以加载完了以后重新设置了宽度（注意如果需要图标，需要修改chosen.css 对应图标路径）：

如果select是动态生成的，

$(".chosen-select").chosen();//需要先初始化
$(".chosen-select").append(zhroption) ；//然后再赋值
$(".chosen-select").trigger("chosen:updated");
$(".chosen-container").attr("style", " width:100%");

Jquery 插件 chosen_v1.8.7 下拉复选框带搜索功能的更多相关文章

自定义实现 PyQt5 下拉复选框 ComboCheckBox
一.前言由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下 ...
同上！下拉复选框点击当前的checkbox 选中后面li 添加到指定区域
(function() { $(".cxbtntj").click(function(){ console.log($("#jsLi1").attr(" ...
finereport 下拉复选框多选
我的第一个jquery插件：下拉多选框
<!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...
jQuery插件：模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
使用jQuery为文本框、单选框、多选框、下拉框、下拉多选框设值及返回值的处理
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
angular2.x 下拉多选框选择组件
angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问下拉多选怎么做... 今天就随便写的个. 组件源码百度云链接: ...
品优购商城项目（二）AngularJS、自动代码生成器、select2下拉多选框
品优购商城想项目第二阶段 AngularJS.自动代码生成器.select2下拉多选框完成了课程第三天.第四天的的任务. 1.学习了AngularJs前端的mvc分层思想,js部分分成control ...
自己用ul模拟实现下拉多选框，
模拟实现下拉多选框效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

[刷题] 24 Swap Nodes in Paris
要求给定一个链表,对于每两个相邻的节点,交换其位置示例 1->2->3->4->NULL 2->1->4->3->NULL 实现 1 struct ...
【yumex图形安装双击】【转载】CentOS yum的详细使用方法
CentOS yum的详细使用方法 yum是什么yum = Yellow dog Updater, Modified主要功能是更方便的添加/删除/更新RPM包.它能自动解决包的倚赖性问题.它能便于管理 ...
jmeter while控制器踩坑
在使用jmeter测试一个复杂流程,需要用到while控制器,对于里面的contition,使用jexl3方式,怎么看都没有问题,可是死活跳不出流程,各种莫名其妙的报错,甚至用单个写死的变量(已设置为 ...
Linux 仿真终端：SecureCRT 常用配置
SecureCRT 有两类配置选项,分别是会话选项和全局选项. 会话选项:修改配置只针对当前会话有效全局选项:修改配置对所有会话有效一般会先选择全局选项修改全局配置,然后选择会话选项单独修改个别会 ...
untiy项目中使用MD5加密
没有详细研究过暂时贴上代码以便以后研究: public static string MD5Encrypt(string strText) { MD5 md5 = MD5.Create(); byte[ ...
DDD中限界上下文与通用语言的作用
什么是通用语言通用语言, 最主要的目的就是减少交流中信息丢失, 在实际开发中, 可能关联很多人, 例如有业务层面的业务细节制定者.领域专家.产品经理.项目经理 .架构师.开发经理.测试经理等等, 即 ...
[leetcode] 68. 文本左右对齐(国区第240位AC的~)
68. 文本左右对齐国区第240位AC的~我还以为坑很多呢,一次过,嘿嘿,开心其实很简单,注意题意:使用"贪心算法"来放置给定的单词:也就是说,尽可能多地往每行中放置单词. 也 ...
rabbit_消费者
import pika import json import time import os import ast import uuid import time import json import ...
SQL Server 动态创建表结构
需求是,在word里面设计好表结构(主要在word中看起来一目了然,方便维护),然后复制sql 里面,希望动态创建出来存储表结构的表 CREATE TABLE [dbo].[Sys_CreateTa ...
Go benchmark 详解
前言基准测试(benchmark)是 go testing 库提供的,用来度量程序性能,算法优劣的利器. 在日常生活中,我们使用速度 m/s(单位时间内物体移动的距离)大小来衡量一辆跑车的性能,同理 ...

Jquery 插件 chosen_v1.8.7 下拉复选框带搜索功能

Jquery 插件 chosen_v1.8.7 下拉复选框带搜索功能的更多相关文章

随机推荐

热门专题