zoukankan      html  css  js  c++  java
  • select2(前端选择框_框架)

    1.官网

    简介

    select是一个优化下拉框select的jQuery插件,它支持搜索(搜索选择)、远程数据集、
    以及无限滚动的结果。最近的还支持下拉分组,下拉标签。同时,提供了很多相关的方法,
    比如获取下拉选项值val,下拉选项ID,下拉选项jQuery对象节点等。

    官网
    链接

    2.安装

    注意此框架依赖于jquery

    2.1cdn安装:直接复制即可

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    

    2.2在github中下载源码:

    下载

    下载之后解压文件在其中的dist文件夹中就是我们需要的文件

    3.演示

    演示最常用的搜索框select
    代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>select_day01</title>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    </head>
    <body>
        <select style=" 800px;" class="js-example-basic-multiple" name="states[]" multiple="multiple">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
          </select>
    </body>
    <script>
       $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
    });
    </script>
    </html>
    

    代码演示

  • 相关阅读:
    ----Vue 单页应用的首屏优化----
    ----小程序之rich-text图片宽度自适应----
    ----vue-router 如何在新窗口打开页面----
    ----element-ui实现时间控件开始时间和结束时间关联----
    ----element-ui自定义表单验证----
    ----js中的every和some----
    「Linux学习」之挂载访问samba服务
    「Linux学习」之samba和nfs共享服务搭建
    「Linux学习」之防火墙服务设置
    「linux学习」之批量创建用户脚本
  • 原文地址:https://www.cnblogs.com/yaoliuyang/p/13472401.html
Copyright © 2011-2022 走看看