地址：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 下拉复选框带搜索功能的更多相关文章
	

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

	


随机推荐
	

    
									
  1. 【转载】Windows 10系统默认将画面显示比例调整至125%或150%，最高分辨率已经达到3840×2160（4K）这一级别。
			
    高分屏打开软件界面模糊?不会设置太浪费 2017-08-31 19:37 抹又重彩 现在有好多朋友都喜欢并买了高分屏笔记本电脑.高分屏笔记本就是配有高分辨率屏幕的笔记本.为了给用户带来更好的视觉体验, ...
    
			
    2. 
						
  2. lambda,filter,map,reduce
			
    # lambda,filter,map,reduce from functools import reduce print('返回一个迭代器') print((x) for x in range(5) ...
    
			
    3. 
						
  3. K8S的资源管理
			
    K8S的资源管理 管理K8S资源的三种基本方法: 陈述式资源管理方法-使用cli工具进行管理. 声明式资源管理方式-主要依耐资源配置清单. GUI式资源管理方法-主要依耐图形界面. 陈述式资源管理方法 ...
    
			
    4. 
						
  4. 针对Tab键不能使用解决办法（Linux系统）
			
    Tab键在装Linux操作系统时,最小化安装没有安装能使用Tab键的安装包,Tab键就无法使用,但命令和本该有的目标也有. 这时就需要安装bash-completion包.,废话不多说,直接上! 一. ...
    
			
    5. 
						
  5. s40 KVM虚拟化企业级实战
			
    1-为何使用虚拟化 02-KVM虚拟化环境准备 yum install libvirt* virt-* qemu-kvm* -y [root@cs7-kvm ~]# systemctl start l ...
    
			
    6. 
						
  6. 10.1 ifconfig：配置或显示网络接口信息
			
    ifconfig命令 用于配置网卡IP地址等网络参数或显示当前网络的接口状态,其类似于Windows下的ipconfig命令,这两个命令很容易混淆,读者需要区分一下.此外,ifconfig命令在配置网 ...
    
			
    7. 
						
  7. IDEA 快速上手指南（全配置）（Day_23）
			
    Idea快速入门指南 1.安装 1.1.安装 我们使用的是2017.3.4版本: 双击打开, 选择一个目录,最好不要中文和空格: 然后选择桌面快捷方式,请选择64位: 然后选择安装: 开始安装: 然后 ...
    
			
    8. 
						
  8. C语言实现推箱子游戏完整代码
			
    C语言实现推箱子游戏完整代码 前言 自己做的,可能有些代码不够工整,或者有些小问题,但游戏的基本操作是可以实现的 代码效果 代码一共分为8个部分,4个控制上下左右移动,2个判断输赢,1个统计归为的个数 ...
    
			
    9. 
						
  9. 第14讲 | HTTP协议：看个新闻原来这么麻烦
			
    第14讲 | HTTP协议:看个新闻原来这么麻烦 http://www.163.com 是个 URL,叫作统一资源定位符. 之所以叫统一,是因为它是有格式的.HTTP 称为协议,www.163.com ...
    
			
    10. 
						
  10. 七、Numpy高效数据处理
			
    Numpy的主要作用是进行矩阵运算 在使用时首先要导入包 import numpy as np np.version.version 用来查看版本信息 # 构建一维数组 n1=np.array([1, ...
    
			
    11.