01：jQuery的下拉选select2插件用法

时间：2022-02-28 14:27:55

1.1 select2插件基本使用

　　1、下载select2插件

　　　　　　1. 下载地址：https://github.com/select2/select2

　　　　　　2、官网地址：https://select2.org/getting-started/basic-usage

　　　　　　3、文件需要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上

　　2、使用原有的 option

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <select class="js-example-basic-single" name="state">

         <option value="2">tom</option>

         <option value="18">naiqiang.xiao</option>

         <option value="19">jian.yang</option>

    </select>

    <link href="/static/select2/select2.css" rel="stylesheet" />

    <script src="/static/jquery-1.12.4.js"></script>

    <script src="/static/select2/select2.js"></script>

    <script>

        $(document).ready(function() {

            $('.js-example-basic-single').select2();

        });

    </script>

</body>

</html>

使用原有的 option

　　3、加载本地数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <select id="select"></select>

    <link href="/static/select2/select2.css" rel="stylesheet" />

     <script src="/static/jquery-1.12.4.js"></script>

     <script src="/static/select2/select2.js"></script>

    <script>

        var data = [

            { id: 0, text: 'enhancement' },

            { id: 1, text: 'bug' },

            { id: 2, text: 'duplicate' },

            { id: 3, text: 'invalid' },

            { id: 4, text: 'wontfix' }

            ];

        $("#select").select2({

         data: data,

         placeholder:'请选择',

         allowClear:true

        })

    </script>

</body>

</html>

加载本地数据

1.2 使用ajax加载远程数据

　　1、参数说明 

　　　　　　1.q: params.term  查询参数（params.term表示输入框中内容，q发生到服务器的参数名；所以这里你可以添加自定义参数，如：stype:'person'）

　　　　　　2.processResults中results:  data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）

　　　　　　3.minimumInputLength 最小需要输入多少个字符才进行查询，与之相关的maximumSelectionLength表示最大输入限制。

　　　　　　4.escapeMarkup 字符转义处理

　　　　　　5.templateResult 返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里，当然你可以return repo.text+"1";等

　　　　　　6.templateSelection 选中项回调function formatRepoSelection(repo){return repo.text}

　　　　　　7.关于返回的 json的格式：select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}]，新版严格要求这样的格式，当然你可以添加列，如：[{id:1,text:'text',name:'liu'}]

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        ul li{

            width: 100px;

        }

    </style>

</head>

<body>

    <select id="select" style="width: 400px"></select>

    <link href="/static/select2/select2.css" rel="stylesheet" />

     <script src="/static/jquery-1.12.4.js"></script>

     <script src="/static/select2/select2.js"></script>

    <script>

        $("#select").select2({

            ajax: {

                url: "/data/",

                dataType: 'json',

                delay: 250,

                data: function(params) {

                    return {

                        q: params.term,  // 这里是查询参数，当输入框的值改变时就会实时将此参数提交到后台

                    };

                },

                processResults: function(data) {

                    return {

                        results: data

                    };

                },

                cache: true

            },

            escapeMarkup: function(markup) {

                return markup;

            },

            // minimumInputLength: 10,

            templateResult: formatRepo,

            templateSelection: formatRepoSelection,

            placeholder:'请选择',

            allowClear:true

        });

        // 返回结果回调此函数 repo 是url中返回的数据, 可以在这里对返回数据进行过滤

        function formatRepo(repo){

            return repo.text

        }

        // 选中选项时回调此函数

        function formatRepoSelection(repo){

            return repo.text

        }

    </script>

</body>

</html>

加载远程数据

01：jQuery的下拉选select2插件用法的更多相关文章

  1. jQuery的下拉选select2插件用法

    1转自:https://www.jb51.net/article/95561.htm 用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉 ...

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

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

  3. 在select2插件中append下拉选，点击没反应的解决

    今天前端大佬帮我解决了一个棘手的问题:克隆了已有系统的网页,尝试把复制下来的html改造成jsp.基本功能正常,然而点击新增按钮,出来的行无法点击下拉选,控制台也没报错. 项目用的是jeesite2. ...

  4. jQuery美化下拉菜单插件dropkick

    dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...

  5. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  6. 非常实用的select下拉框-Select2&period;js

    在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...

  7. Jquery操作下拉框&lpar;DropDownList&rpar;实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

  8. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  9. Jquery操作下拉框&lpar;DropDownList&rpar;的取值赋值实现代码&lpar;王欢&rpar;

    Jquery操作下拉框(DropDownList)的取值赋值实现代码(王欢) 1. 获取选中项: 获取选中项的Value值: $('select#sel option:selected').val() ...

随机推荐

  1. json提交数据到服务端

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Courier New"; color: #393939; backgr ...

  2. Ubuntu下安装Anaconda和tensorflow

    官方指南:https://github.com/tensorflow/tensorflow/blob/master/tensorflow/docs_src/install/install_linux. ...

  3. weblogic对JSP预编译、weblogic读取JSP编译后的class文件、ant中weblogic&period;jspc预编译JSP

    我们都知道在weblogic中JSP是每次第一次访问的时候才会编译,这就造成第一次访问某个JSP的时候性能下降,有时候我们也希望JSP被编译成class然后打包在jar中实现隐藏JSP的功能,下面介绍 ...

  4. 使用javassist进行动态编程

    今天在研究dubbo时,发现一个新的知识点,可以使用javassist包进行动态编程,hibernate也使用该包进行编程.晚上百度了很多资料,将它的特性以代码的形式展现出来. package com ...

  5. UVa 11722 Joining with Friend &lpar;几何概率 &plus; 分类讨论&rpar;

    题意:某两个人 A,B 要在一个地点见面,然后 A 到地点的时间区间是 [t1, t2],B 到地点的时间区间是 [s1, s2],他们出现的在这两个区间的每个时刻概率是相同的,并且他们约定一个到了地 ...

  6. 为什么IIS的应用池回收设置默认为1740分钟-20180720

    [非原创,个人收集,希望大家有感触] 你可曾留心过IIS的应用池回收设置默认值是多少?1740分钟对吗,那么为什么会是这样的数值呢? 在asp.net的某篇博客里提到了这个问题. 有关微软产品的许多决 ...

  7. mvc学习-编辑提交需要注意-mvc重点

    示例代码: // GET: /Movies/Edit/5 public ActionResult Edit(int? id) { if (id == null) { return new HttpSt ...

  8. 发送垃圾邮件的僵尸网络——药物（多）、赌博、股票债券等广告&plus;钓鱼邮件、恶意下载链接、勒索软件&plus;推广加密货币、垃圾股票、色情网站（带宏的office文件、pdf等附件）

    卡巴斯基实验室<2017年Q2垃圾邮件与网络钓鱼分析报告> 米雪儿 2017-09-07 from:http://www.freebuf.com/articles/network/1465 ...

  9. redis在Linux上的安装

    1 安装redis编译的c环境 输入命令: 注意yum安装必须联网 yum install gcc-c++  如果提示是否需要下载输入y就可以开始下载. 2 redis安装 1 上传文件 2 解压文件 ...

  10. Tornado用户指引（一）-----------异步和非阻塞I&sol;O

    摘要:异步和非阻塞I/O实时WEB的特性是经常需要为每个用户端维持一个长时间存活但是大部分时候空闲的连接.在传统的同步式web服务器中,这主要通过为每个用户创建一个线程来实现,这样的代价是十分昂贵的. ...

相关文章