{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试chosen插件</title>
    {#需要引入js、css文件#}
    <script src="{% static "components/jquery/dist/jquery.js" %}"></script>
    <script src="{% static "components/chosen/chosen.jquery.js" %}"></script>
    <link rel="stylesheet" href="{% static "components/chosen/chosen.css" %}"/>
    <style>
        {#隐藏搜索框，F12查看DOM#}
        {% comment %}
        .chosen-container-single .chosen-search input {
            display: none;
        }
        {% endcomment %}
    </style>
</head>
<body>
<select name="select_name" id="select_id" class="chosen-select">
    <option value="0">中国</option>
    <option value="1">加拿大</option>
    <option value="2">美国</option>
    <option value="3">法国</option>
</select>
</body>
</html>
<script>
    var chosen_plugin = $('.chosen-select').chosen({
        allow_single_deselect: true,//是否允许取消选择
        search_contains: true,//关键字模糊搜索，设置为false，则只从开头开始匹配
        width: '50%',//下拉框宽度
        no_results_text: "没有找到结果！",//搜索无结果时显示的提示
        max_selected_options: 6  //当select为多选时，最多选择个数
    });
    {#change事件#}
    chosen_plugin.change(function () {
        $("#select_id").add(new Option("天国","4"));
    });
    {#动态更新select下的选择项，只要在更新选择项后触发Chosen中的liszt:updated事件就可以了#}
    chosen_plugin.trigger("liszt:updated");
</script>

下拉框搜索插件chosen的更多相关文章

  1. 原生javascript实现 下拉框搜索功能

    由于业务需求,要实现 一个下拉框搜索功能.这个下拉功能和百度的还是有点区别的,百度的是时时与服务器交互的,而这个只是模拟.技术点在于实现 了搜索功能. 未搜索前如下图: 搜索后: <!DOCTY ...

  2. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  3. 【Select2】带搜索框的下拉框美化插件

    1  引入js css 文件 <script src="js/jquery-1.11.1.min.js"></script> <script src= ...

  4. 使用jquery select2实现下拉框搜索功能

    由于公司后台系统下拉框数据量太多了,用户操作起来要不方便所以增加了下拉框里面一个搜索功能 1从官网下载jquery select2 下来 地址https://select2.github.io/ 2: ...

  5. laravel7 jqAjax下拉框搜索

    html: 设置页面改变事件 <div id="show"> <div class="page-container" style=" ...

  6. jquery 仿百度搜索下拉框的插件

    转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...

  7. BootStrap下拉框搜索功能

    <!DOCTYPE html> <html> <head> <title>jQuery bootstrap-select可搜索多选下拉列表插件-www. ...

  8. DataTables给每一列添加下拉框搜索

    $(document).ready(function() { $('#example').DataTable( { initComplete: function () { var api = this ...

  9. jQuery下拉框扩展和美化插件Chosen

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...

随机推荐

  1. C++中的二级指针和指针引用函数传参

    在函数的使用过程中,我们都明白传值和传引用会使实参的值发生改变.那么能够通过传指针改变指针所指向的地址吗? 在解决这个问题之前,也许我们应该先了解指针非常容易混淆的三个属性: ①.指针变量地址(&am ...

  2. 61.volatile关键字

    volatile作用 volatile的作用是可以保持共享变量的可见性,即一个线程修改一个共享变量后,另一个线程能够读取到这个修改后的值. 先来看一个问题: 定义一个Task类 package com ...

  3. 用Nginx分流绕开Github反爬机制

    用Nginx分流绕开Github反爬机制 0x00 前言 如果哪天有hacker进入到了公司内网为所欲为,你一定激动地以为这是一次蓄谋已久的APT,事实上,还有可能只是某位粗线条的员工把VPN信息泄露 ...

  4. 2016.5.19——Excel Sheet Column Title

    Excel Sheet Column Title 本题收获: 1.由int型转换为整型(string),如何转化, res = 'A'+(n-1)%26和之前由A-z转化为十进制相反,res = s[ ...

  5. 【Nginx】 Nginx实现端口转发

    什么是端口转发 当我们在服务器上搭建一个图书以及一个电影的应用,其中图书应用启动了 8001 端口,电影应用启动了 8002 端口.此时如果我们可以通过 localhost:8001 //图书 loc ...

  6. Hibernate5笔记9--Hibernate注解式开发

    Hibernate注解式开发: (1)注解式开发的注意点: Hibernate中使用注解,主要是为了替代映射文件,完成“类到表,属性到字段”的映射.  JPA提供了一套功能强大的注解.Hibernat ...

  7. excel导入时候日期格式转成date

    最近在做导入的时候发现,excel中设置数值格式是不能有日期的那些符号出现的,/ - : 之类的,否则就会变成数字到了java后台,设置成日期,比如 yyyy-mm-dd 到了后台也是数字,即距离19 ...

  8. Ubuntu使用apt-get upgrade升级时出错

    今天在按照常规的sudo apt-get update更新软件列表后,再使用sudo apt-get upgrade升级软件时,出现了以下的错误: 正在设置 linux-image-extra-4.4 ...

  9. 83.Linux之ubuntu-14.04.4-desktop-amd64安装

    QQ(1044233591) 一.软件下载 二.安装 1.上一节已经安装好了VMware10.0.4软件,双击桌面VMware Workstation软件图标,出现VMware软件界面,点击" ...

  10. WebApi Owin SelfHost OAuth2 - 授权服务和资源服务分离方案

    使用JWT 参考:http://www.cnblogs.com/grissom007/p/6294746.html