{% 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. Go语言知识点笔记

    golang的花括号: 在go中,继承了C系的花括号作为一个作用域块的包含范围指示,但不同于C/C++中花括号位置可任意摆放,go要求“ { ”必须在右侧(一行代码尾部),不能单独另起一行.类似Pyt ...

  2. 【codeforces】【比赛题解】#940 CF Round #466 (Div. 2)

    人生的大起大落莫过如此,下一场我一定要回紫. [A]Points on the line 题意: 一个直线上有\(n\)个点,要求去掉最少的点,使得最远两点距离不超过\(d\). 题解: 暴力两重fo ...

  3. linux nginx大量TIME_WAIT的解决办法--转

    netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' TIME_WAIT 8535 CLOSE_WAIT 5 FIN ...

  4. 使用pandas把mysql的数据导入MongoDB。

    使用pandas把mysql的数据导入MongoDB. 首先说下我的需求,我需要把mysql的70万条数据导入到mongodb并去重, 同时在第二列加入一个url字段,字段的值和第三列的值一样,代码如 ...

  5. MVC 视图页对数字，金额 用逗号 隔开（数字格式化）

    cshtml页面代码: <tr> <th>@Model.BankName</th> <th>@Model.Month</th> <th ...

  6. C/C++杂记：运行时类型识别（RTTI）与动态类型转换原理

    运行时类型识别(RTTI)的引入有三个作用: 配合typeid操作符的实现: 实现异常处理中catch的匹配过程: 实现动态类型转换dynamic_cast. 1. typeid操作符的实现 1.1. ...

  7. jupyter（ipython notebook） 安装和入门教程

    近期大家无论是自己做数据分析还是紧急答辩做PPT,可能都需要画一些数据的展示图:以前大家都是用excel画图,但excel画图存在一定的局限性,比如你要画个累积直方图,excel就很麻烦了,所以给大家 ...

  8. AdvStringGrid 固定行、列

  9. ZooKeeper的基本概念（二）

    第一篇博文,我们对Zookeeper有了一个简单的认识,而且比较浅显,易懂,这篇博文,我们了解它的基本概念,如下图所示: 了解它的基本概念,有助于我们后面的学习,虽然今天的文章都是概念性质的内容,但是 ...

  10. PowerTool x64驱动模块逆向分析（持续更新）

    比赛打完了,来继续搞了,因为那个主动防御正在写,所以想找找思路正好想到可以来逆向一下PT的驱动模块看看pt大大是怎么写的程序. PT x64版本的驱动模块是这个kEvP64.sys. 0x0 先来看看 ...