Select2使用实例——很好用的下拉提示选择框！

最新推荐文章于 2023-03-31 16:19:35 发布
最新推荐文章于 2023-03-31 16:19:35 发布
阅读量2.4w 收藏 11
点赞数 9
分类专栏： Js/JQuery/Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/evankaka/article/details/50198845
版权

     这几天一直的寻找能把select和sugget结合起来使用的例子，然后就看到了这个，发现真的很不错，它支持下拉的直接选择，也支持在下拉内容中输入过滤。

整体效果就是下面这样的：


官方网站：https://select2.github.io/

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

    <link href="select2.min.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="select2.min.js"></script>

这里要注意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、效果

效果1


效果2


还有一些其它的内容，比如果说支持通过ajax查找来填充，支持input等，有兴趣的自己去官网再去看吧！

Evankaka
关注
  • 9
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端插件之Select2使用
weixin_30458043的博客
07-30 570
工欲善其事，必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件，上一篇文章介绍了bootstrap-duallistbox这个插件的使用，这一篇开始Select2的征服之旅 Select2是一款基于JQuery的下拉列表插件，主要用来优化select，支持单选和多选，同时也支持分组显示、列表检索、远程获取数据等众多好用的功能 项目地址：https://selec...
select2 如何自定义提示信息
weixin_30724853的博客
08-31 1658
　　　　select2使用 ; select2 placeholder ; select2 搜索框 ; select2 改造 　　最近项目中使用到了select2来美化和丰富下拉框的功能，这款插件功能丰富，使用简单，可以对已经生成的select标签进行改造，也可以对json数据直接生成下拉列表，包括一些检索功能，异步加载功能等，能够很大程度的满足视觉和交互的要求。是开发过程中不可多得的一款利器。...
select2-example:运行示例select2
05-10
select2-example
select2搜索内容显示搜索词
johnhuster的专栏
11-24 2080
select2搜索内容显示搜索词，初始化select2时不使用tags标签，这样在搜索结果中就不会出现搜索关键词
select2实例和一些参数详解
yue_yue_moon的博客
04-18 3299
select2 效果如下： 标签 <input id='select' type='text' > //一些文档上用的标签为div或者select js代码 function search2ProductList(){ ("#select").select2({ language: "zh-CN", //设置语言 placeholder: "...
select2使用示例
weixin_34237596的博客
09-13 672
为什么80%的码农都做不了架构师？>>> ...
Bootstrap Select2组件使用教程
Allen_Sushi首页
03-31 1846
select2
JS实现的5级联动Select下拉选择框实例
10-23
主要介绍了JS实现的5级联动Select下拉选择框,涉及javascript数组调用及遍历的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
01-20
本文实例讲述了yii2框架中使用下拉菜单的自动搜索yii-widget-select2的方法。分享给大家供大家参考，具体如下： github中源代码地址：https://github.com/kartik-v/yii2-widget-select2 利用composer.phar安装此插件...
原生JS实现自定义下拉单选选择框功能
10-17
在本文中，我们将探讨如何使用原生JavaScript实现一个自定义的单选下拉选择框功能。这个组件通常用于提供用户友好的交互界面，允许用户在一组预设的选项中进行选择。由于浏览器自带的下拉框样式不统一且可能不符合UI...
django前端页面下拉选择框默认值设置方式
09-16
当涉及到下拉选择框（Dropdown Select）时，我们通常使用`<select>`元素来创建这样的控件。要设置下拉选择框的默认值，我们需要确保在HTML模板中正确地设定`selected`属性。下面我们将详细介绍如何在Django中设置...
select2用法总结
ywb201314的专栏
03-10 4108
Select2是什么 Select2是一款可以对HTML的标签进行功能优化的jQuery插件,支持对列表进行检索,从远程数据源获取列表项等各种功能. 官网文档在此:https://select2.github.io 代码示例 示例1.从数组中获取列表项且支持搜索 前端代码: html> head> script src="http://lib.sin
使用select2实现多选select下拉框
热门推荐
Nightliar的博客
04-18 3万+
多选标签： 卡卡西 鸣人 佐助 小樱 波风水门 大蛇丸 纲手 自来也 单选标签： 请选择... 卡卡西 鸣人 佐助
Select2下拉框示例
chengju7332的博客
05-19 228
在项目中，需要用到下拉框，于是找到了这个比较好用的select2插件，功能很强大，几乎能满足所有的下拉选择需求,选中之后可以点击取消选择的，另，本例连同ajax获取选择的数据一并提供。 <!DOCTYPE html> <html> <head> ...
java下拉菜单选择前弹提示框_javascript实现下拉提示选择框
weixin_35972359的博客
02-26 421
本文介绍了select和sugget结合起来使用的例子，支持下拉的直接选择，也支持在下拉内容中输入过滤。整体效果就是下面这样的：1、首先需要引入如下文件这里要注意jquery要放在select2的前面。2、一些实例Document.select2-dropdown {margin-left: 8px !important;margin-top: 20px !important;}这是单选例子Ala...
select2搜索框提示文字placeholder
征途人生&梦
06-11 1万+
select2配置时的placeholder是显示在下拉框中的 但是我需要在搜索框中显示提示文字, 百度翻了很久都没有翻到, bing终于翻到了 https://github.com/select2/select2/issues/3362 效果 实现: select2 &lt;select class="select2-list taxon-select2" name="qu...
使用select2插件实现select选择框的一些常用功能
huaweichenai的博客
01-06 1261
在这之前对于select下拉框我使用bootstrap-select插件来处理select下拉选择框：https://www.wj0511.com/site/detail.html?id=224 但是现在我们公司使用的是select2插件来处理select选择框，这里我就来简单的介绍下select2插件的简单使用 一：下载select2 select2的github地址：https://gi...
DOM实现select选择提示框
weixin_30591551的博客
02-03 184
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="widt...
selenium下拉选择框选择
最新发布
08-16
你可以使用selenium的Select类来处理下拉选择框的选择。首先，你需要导入Select类的模块。你可以使用以下方式导入： ``` from selenium.webdriver.support.ui import Select ``` 或者 ``` from selenium.webdriver.support.select import Select ``` 然后，你需要实例化一个Select类的对象，并通过该对象选择你想要的选项。你可以使用以下方法进行选择: - select_by_index(index)：通过索引进行选择，索引从1开始。 - select_by_value(value)：通过value属性值进行选择。 - select_by_visible_text(text)：通过可见文本进行选择。 例如，如果你想通过索引选择第二个选项，你可以使用以下代码： ``` selector = Select(driver.find_element_by_id("Resolution")) selector.select_by_index(2) ``` 如果你想通过value属性值选择一个选项，你可以使用以下代码： ``` selector = Select(driver.find_element_by_id("Resolution")) selector.select_by_value("5") ``` 如果你想通过可见文本选择一个选项，你可以使用以下代码： ``` selector = Select(driver.find_element_by_id("Resolution")) selector.select_by_visible_text('1280x720') ``` 希望这个解答对你有所帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [selenium下拉选择框Select实例化](https://blog.csdn.net/m0_58394647/article/details/130938821)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [selenium下拉选择框处理](https://blog.csdn.net/weixin_30274627/article/details/95220694)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值