利用select2制作带有搜索功能的select下拉框

1.引入线上css和js

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

2.在select标签内加入class属性js-example-basic-single

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

<option value="AL">Alabama</option>

...

<option value="WY">Wyoming</option> </select>

3.调用js

$(document).ready(function() {

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

});

关于中文提示

看到有人引入官方文档提供的zh-cn属性和JS来处理中文,在这采用另一种简单粗暴的解决方案:直接找到JS源码进行修改即可。

——在源文件中找到 select2.min.js文件,ctrl+F 搜索 “Searching...”,将找到的代码改为“查找中...”,再继续搜索 “no results found”,同理修改为“无数据”。

select2.min.css下载:https://blog-static.cnblogs.com/files/yang-xiansen/select2.min.css

select2.min.js下载:https://blog-static.cnblogs.com/files/yang-xiansen/select2.min.js

带搜索框的select下拉框的更多相关文章

  1. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  2. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  3. jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  4. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  5. select下拉框左右变换

    效果图: 使用jQuery插件---multiselect2side做法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

  6. 使用jquery-combobox实现select下拉框多选之后,如何将下拉框的值传给input隐藏域

    我在之前的一篇博文中eaeyui-combobox实现组合查询(即实现多个值得搜索)地址:http://www.cnblogs.com/dushan/p/4778897.html 实现了select下 ...

  7. 2.10 select下拉框

    2.10 select下拉框 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select    1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就 ...

  8. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  9. jQuery制作简洁的多级联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

随机推荐

  1. SUN巡检命令

    # hostname (主机名)# hostid# uname -X# uname -a # w (进程)# who# last# ps -eaf# /usr/ucb/ps -aux# prstat ...

  2. javascript document.referrer 用法

    document对象的referrer属性,返回导航到当前网页的超链接所在网页的URL. 举例: 1. a.html文件内容如下: <a href="b.html">浏 ...

  3. Quartz使用(1) - 初识quartz

    1. 背景 由于最新的工作项目中,需要使用quartz框架,以完成相关的任务的定时执行.经过两周的调研与使用,本系列博客会参考官网及网上相关博客,结合工作项目中的使用,详细介绍quartz的各个方面. ...

  4. HDU 5352——MZL's City——————【二分图多重匹配、拆点||网络流||费用流】

    MZL's City Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  5. [HZOI 2015]复仇的序幕曲

    [题目描述] 你还梦不梦痛不痛,回忆这么重你怎么背得动 ----序言 当年的战火硝烟已经渐渐远去,可仇恨却在阿凯蒂王子的心中越来越深 他的叔父三年前谋权篡位,逼宫杀死了他的父王,用铁血手腕平定了国内所 ...

  6. 【转载】CSS3 常用四个动画(旋转、放大、旋转放大、移动)

    http://blog.csdn.net/fungleo/article/details/49848905

  7. Java Knowledge series 1

    Programming language evolves always along with Compiler's evolvement JVM as Additional Indirection I ...

  8. Android开发基础

    一.Android开发环境搭建 1.下载安卓SDK 官方下载地址:http://developer.android.com/sdk/index.html 2.下载安装JDK 官方下载地址:JDK6 h ...

  9. yii2.0安装ElasticSearch及使用

    yii2.0安装ElasticSearch安装及使用教程:https://www.yiichina.com/tutorial/1046 Elasticsearch 权威指南(中文版):https:// ...

  10. PS:将一个图片变成圆形

    1.选择一张正方形图片并放置到PS软件中 2.选择“选框工具”->右击选择"椭圆选框工具” 3.画出你要圆形内的范围: 4.选择两种方式中的一种,实际上效果是一毛一样的 5.右下角就会 ...