select2下拉菜单心得

最新推荐文章于 2024-01-25 00:44:52 发布
最新推荐文章于 2024-01-25 00:44:52 发布
阅读量367 收藏
点赞数 1

1、首先需要引入如下文件

这里要注意jquery要放在select2的前面

2、一些实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="select2.min.css" rel="stylesheet" />
    <style type="text/css">
    .select2-dropdown {
        margin-left: 8px !important;
        margin-top: 20px !important;
    }
    </style>
</head>

<body>
    <h1>这是单选例子</h1>
    <div class="s1-example">
        <select class="js-example-basic-single" style="width:200px">
            <optgroup label="Alaskan/Hawaiian Time Zone">
                <option value="AK">Alaska</option>
                <option value="HI">Hawaii</option>
                <option value="">请选择</option>
            </optgroup>
            <optgroup label="Pacific Time Zone">
                <option value="CA">California1111111111111111111111111111111111111111111111111</option>
                <option value="NV">Nevada</option>
                <option value="OR">Oregon</option>
                <option value="WA">Washington</option>
            </optgroup>
            <optgroup label="Mountain Time Zone">
                <option value="AZ">Arizona</option>
                <option value="CO">Colorado</option>
                <option value="ID">Idaho</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NM">New Mexico</option>
                <option value="ND">North Dakota</option>
                <option value="UT">Utah</option>
                <option value="WY">Wyoming</option>
            </optgroup>
            <optgroup label="Central Time Zone">
                <option value="AL">Alabama</option>
                <option value="AR">Arkansas</option>
                <option value="IL">Illinois</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="OK">Oklahoma</option>
                <option value="SD">South Dakota</option>
                <option value="TX">Texas</option>
                <option value="TN">Tennessee</option>
                <option value="WI">Wisconsin</option>
            </optgroup>
            <optgroup label="Eastern Time Zone">
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="IN">Indiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="OH">Ohio</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WV">West Virginia</option>
            </optgroup>
        </select>
    </div>
    <h1>这是多选例子</h1>
    <div class="s2-example">
        <select class="js-example-basic-multiple" multiple="multiple">
            <optgroup label="Alaskan/Hawaiian Time Zone">
                <option value="AK">Alaska</option>
                <option value="HI">Hawaii</option>
                <option value="">请选择</option>
            </optgroup>
            <optgroup label="Pacific Time Zone">
                <option value="CA">California1111111111111111111111111111111111111111111111111</option>
                <option value="NV">Nevada</option>
                <option value="OR">Oregon</option>
                <option value="WA">Washington</option>
            </optgroup>
            <optgroup label="Mountain Time Zone">
                <option value="AZ">Arizona</option>
                <option value="CO">Colorado</option>
                <option value="ID">Idaho</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NM">New Mexico</option>
                <option value="ND">North Dakota</option>
                <option value="UT">Utah</option>
                <option value="WY">Wyoming</option>
            </optgroup>
            <optgroup label="Central Time Zone">
                <option value="AL">Alabama</option>
                <option value="AR">Arkansas</option>
                <option value="IL">Illinois</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="OK">Oklahoma</option>
                <option value="SD">South Dakota</option>
                <option value="TX">Texas</option>
                <option value="TN">Tennessee</option>
                <option value="WI">Wisconsin</option>
            </optgroup>
            <optgroup label="Eastern Time Zone">
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="IN">Indiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="OH">Ohio</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WV">West Virginia</option>
            </optgroup>
        </select>
    </div>
    <h1>这是可清除有提示例子</h1>
    <div class="s3-example">
        <select class="js-example-placeholder-single" style="width:200px">
            <optgroup label="Alaskan/Hawaiian Time Zone">
                <option value="AK">Alaska</option>
                <option value="HI">Hawaii</option>
                <option value="">请选择</option>
            </optgroup>
            <optgroup label="Pacific Time Zone">
                <option value="CA">California1111111111111111111111111111111111111111111111111</option>
                <option value="NV">Nevada</option>
                <option value="OR">Oregon</option>
                <option value="WA">Washington</option>
            </optgroup>
            <optgroup label="Mountain Time Zone">
                <option value="AZ">Arizona</option>
                <option value="CO">Colorado</option>
                <option value="ID">Idaho</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NM">New Mexico</option>
                <option value="ND">North Dakota</option>
                <option value="UT">Utah</option>
                <option value="WY">Wyoming</option>
            </optgroup>
            <optgroup label="Central Time Zone">
                <option value="AL">Alabama</option>
                <option value="AR">Arkansas</option>
                <option value="IL">Illinois</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="OK">Oklahoma</option>
                <option value="SD">South Dakota</option>
                <option value="TX">Texas</option>
                <option value="TN">Tennessee</option>
                <option value="WI">Wisconsin</option>
            </optgroup>
            <optgroup label="Eastern Time Zone">
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="IN">Indiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="OH">Ohio</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WV">West Virginia</option>
            </optgroup>
        </select>
    </div>
    <div class="s4-example">
        <select class="js-example-placeholder-multiple" multiple="multiple" style="width:400px">
            <optgroup label="Alaskan/Hawaiian Time Zone">
                <option value="AK">Alaska</option>
                <option value="HI">Hawaii</option>
                <option value="">请选择</option>
            </optgroup>
            <optgroup label="Pacific Time Zone">
                <option value="CA">California1111111111111111111111111111111111111111111111111</option>
                <option value="NV">Nevada</option>
                <option value="OR">Oregon</option>
                <option value="WA">Washington</option>
            </optgroup>
            <optgroup label="Mountain Time Zone">
                <option value="AZ">Arizona</option>
                <option value="CO">Colorado</option>
                <option value="ID">Idaho</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NM">New Mexico</option>
                <option value="ND">North Dakota</option>
                <option value="UT">Utah</option>
                <option value="WY">Wyoming</option>
            </optgroup>
            <optgroup label="Central Time Zone">
                <option value="AL">Alabama</option>
                <option value="AR">Arkansas</option>
                <option value="IL">Illinois</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="OK">Oklahoma</option>
                <option value="SD">South Dakota</option>
                <option value="TX">Texas</option>
                <option value="TN">Tennessee</option>
                <option value="WI">Wisconsin</option>
            </optgroup>
            <optgroup label="Eastern Time Zone">
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="IN">Indiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="OH">Ohio</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WV">West Virginia</option>
            </optgroup>
        </select>
    </div>
    <h1>这是直接使用js对象初始化的例子</h1>
    <div>
        <select class="js-example-data-array" style="width:200px"></select>
    </div>
    <div>
        <select class="js-example-data-array-selected" style="width:200px">
            <option value="2" selected="selected">duplicate</option>
        </select>
    </div>

    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="select2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".js-example-basic-single").select2(); //单选
        $(".js-example-basic-multiple").select2(); //多选

        $(".js-example-placeholder-single").select2({ //允许清除
            placeholder: "Select a state", //默认提示语
            allowClear: true
        });

        $(".js-example-placeholder-multiple").select2({
            placeholder: "Select a state" //默认提示语
        });


        var data = [{
            id: 0,
            text: 'enhancement'
        }, {
            id: 1,
            text: 'bug'
        }, {
            id: 2,
            text: 'duplicate'
        }, {
            id: 3,
            text: 'invalid'
        }, {
            id: 4,
            text: 'wontfix'
        }];

        $(".js-example-data-array").select2({
            data: data
        })

        $(".js-example-data-array-selected").select2({
            data: data
        })

    });
    </script>
</body>

</html>

3、效果

在这里插入图片描述

Hello，C++！
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
select2详解
qq_27009517的博客
05-12 7538
官网：http://select2.github.io/select2/ https://select2.org/ 单项选择 默认情况 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport".
浅谈select2的使用
小小白的博客
08-21 5059
前言 select2相比较以往的select下拉框比起来，确实非常方便，它提供了一个可自定义的选择框，支持搜索，标记，远程数据集，无限滚动以及许多其他高度使用的选项。 select2的安装详情请看官方文档介绍的配置方式：https://select2.org/getting-started/installation 支持的类型 传统的 <select> 框中包含任意数量的&lt...
Jquery Select2-3.3.2 autocomplete 使用
04-19
NULL 博文链接：https://elfasd.iteye.com/blog/1860529
Select2插件dropDown的配置
sayoko06的博客
05-04 2261
    近期公司开发页面，使用到了select2的js插件--select2.full.min.js，我们有个需求就是在option的text内容前面和后面要动态的加上图标，如图：    面临问题：使用select2，option的下拉框会经过处理变成&lt;span&gt;标签在页面上显示，所以无法再option上进行添加，而且&lt;option&gt;标签不支持后面加图标。    问题解决：...
select2 的使用教程（简）
程序员蒋老湿的博客
08-30 1万+
用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。 在我的印象里Select2有2个版本，最新版本有一些新的特性，并且更新了一下方法参数，比最初版本要好看一些，本文针对新版本。 官网：http://select2.github.io/ 演示： 请选择 由于博客系统的原因，所以只能演示简单
select2的简单使用
qq_35614955的博客
05-18 1万+
因为项目中需要关联用户，且数据比较多，为了便捷操作，以及防止重名，需要能搜索的下拉框，使用了select2来完成这个功能。使用select2的方式与问题 引入 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
12-19
首先是数据库的设计。分类表叫cate. 我做的是分类数据的二级联动，数据需要的字段有：id,name(中文名),pid(父id)....select name=”type” size=”1″ id=”type”> 请选择类型 <foreach name=’
struts2开发经典总结,错误汇总
12-22
创建下拉菜单使用`s:select`标签，如`<s:select name="ct_sid" list="ctypesonlist" listKey="ct_id" listValue="ct_name" theme="simple" headerKey="0" headerValue="一级栏目">`. `list`属性指定列表的源，`...
servlet 总结
05-16
* `<select>`：下拉菜单标签 * `<textarea>`：多行文本框标签 四、Servlet 概述 Servlet 是一种基于 Java 语言的服务器端编程技术，用于开发基于 Web 的应用程序。Servlet 通过响应客户端的请求，生成动态网页，并...
web前端开发技术实验报告实验五知识.pdf
02-02
表单控件包括表单域、提示信息和表单控件，如 `input` 控件用于定义单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等，`select` 控件用于定义下拉菜单，`textarea` 控件用于定义多行文本输入框。 三、实验...
NZSWebsite:非零和游戏网站资料库
04-11
例如，`<form>`标签用于定义表单，`<input>`用于创建输入字段，`<button>`定义可点击的按钮，而`<select>`和`<option>`则用于创建下拉菜单，供用户选择游戏类别。 此外，HTML还可以与CSS（Cascading Style Sheets）...
使用select2.js实现多功能下拉框,select2中文api
极客神殿
03-03 3198
最近项目中有个需求是商品能够选择多个标签，类似jire中选择标签： 能把选择后选项显示在输入框中，删除时连同整个标签一起删。经过网上咨询、请教同事后，得到一致意见是使用select2。下面是使用select2的初始化、动态赋值，实现标签化多选、以及遇到的问题：1，从http://select2.github.io/examples.html处下载select2源码，把dist目录中css、js引用
JQuery插件Select2详解
xinliucs的博客
08-23 9092
JQuery插件Select2详解 Select2是一款JQuery的下拉表插件，主要用来优化select，支持单选和多选，同时也支持分组显示、列表检索、远程获取数据等功能。 配置CSS/JS文件 在项目里直接引入CDN的地址就可以了 <!-- 加载 Jquery --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- 加载 Select2 --> <li
select2 使用详解 下拉框搜索
最新发布
易的博客
01-25 1207
【代码】select2 使用详解 下拉框搜索。
Select2 后台分页(滚动分页)
cocosum
05-11 2251
/** 小生不才..... * <link rel="stylesheet" href="static/js/components/select2/dist/css/select2.min.css" /> * * <script src="static/js/components/select2/dist/js/select2.full.min.js">&lt...
select2用法总结
weixin_34280237的博客
09-01 406
Select2是什么 Select2是一款可以对HTML的<select>标签进行功能优化的jQuery插件,支持对列表进行检索,从远程数据源获取列表项等各种功能. 官网文档在此:https://select2.github.io 代码示例 示例1.从数组中获取列表项且支持搜索 前端代码: <!DOCTYPE html...
JQuery autocomplete和Select2控件的技术总结
xubingchuan_blog的博客
02-19 4658
最近工作有点忙,难得等到周末,静下心来写写这大概两周遇到的小问题.写在前面的一些话一个自称为后台程序员的我，对于前台的技术一向感冒的我，在面对公司高层大换血的动荡时期，不得不狗血的伪装成一个前后台的技术小白，艰难的攀爬。。。这autocomplete和Select2使用起来确实费了很多时间，还是厚颜无耻的请教了百忙之中的公司前台技术人员才得以完成。。。JQuery autocomplete 使用总结
select2 使用教程（简）
热门推荐
程序员蒋老湿的博客
11-10 8万+
用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。 在我的印象里Select2有2个版本，最新版本有一些新的特性，并且更新了一下方法参数，比最初版本要好看一些，本文针对新版本。 官网：http://select2.github.io/ 演示： 请选择 由于博客系统的原因，所以只能演示简单
select2多选设置select多选，select2取值和赋值
稳哥的小灶
11-05 7万+
select2设置select多选，select2取值和赋值,作为筛选条件的时候，取值相对简单，把选中的id值转为字符串传给后端查询，查询之后会刷新页面，为了在下拉框中显示刚刚选中的值，就需要给select赋值，可以将刚才传给后端的字符串再传回前端，然后转为一位数组，再赋值给select2就会显示刚刚选中的值，赋值方法：$('#id').val(arr).trigger('change')，id为...
jQuery select下拉菜单
08-24
jQuery select下拉菜单的相关操作方法如下： 1. 删除选中项：使用`$('#XXX option:selected').remove();`代码可以删除select下拉菜单中被选中的选项。 2. 删除第一项：使用`$('#XXX option:first').remove();`代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值