前端下拉框select标签的插件——select2.js

news2024/11/18 13:54:58

本文采用的是select2 版本:Select2 4.0.6-rc.1。

可以兼容IE8及以上。亲测过。

官网:Getting Started | Select2 - The jQuery replacement for select boxes

一、认识select2.js

1、使用插件,首先要引入别人的插件了,你可以选择离线(无网络)或者在线引用的(如果有网络)。

在线引用如下所示:
<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>


离线引用如下所示:注意自己的引用路径哦
<link type="text/css" rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
<script type="text/javascript" src="../../plugins/select2/js/select2.js"></script>

2、先将弹出框做出来,你可以模拟数据或者从后台将数据查询出来,进行操作。

<!-- 选择你想要的那条数据哦 -->
<div id="dbName" style="display: none;">
    <form class="form-horizontal setWidth" id="dbNameContent" name="dbNameContent">
        <div class="form-group" style="width: 90%">
            <label for="dbNameCategory" class="col-sm-3 control-label">xxx库<font color='red'>✲</font></label>
            <div class="col-sm-9" style="padding: 0px;">
                <select class="form-control width175" id="dbNameCategory" name="dbNameCategory">
                    <option value='0'>-- 请选择 --</option>
                </select>
            </div>
        </div>
    </form>
</div>

将弹出框先做出来,然后呢。弹出框里面的数据,我是从后台查询出来的,放到select选择框里面的,你可以根据自己的需求来做哦。

3、初始化select2。

<script type="text/javascript">
$(function(){
    $.ajax({
        type : 'post',
        url : "xxxAction!findxxx.action",
        dataType : 'json',
        error : function(request, textStatus,
                errorThrown) {
            fxShowAjaxError(request, textStatus,
                    errorThrown);
        },
        success : function(data) {
            //console.log(data.result);
            var result = data.result;
            for(var i=0;i<result.length;i++){
                $("#dbNameCategory").append("<option value='"+ result[i].id +"'>" + result[i].alias + "</opstion>");
            }
        }
    })
    //初始化select2,关键点在于,将select下拉框里面的id进行定义然后初始化select2
    $("#jobdbNameCategory").select2();
});
</script>

更多其他的功

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1276300.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

跨越鸿沟-颠覆性产品营销指南笔记

跨越鸿沟-颠覆性产品营销指南笔记 一、发现鸿沟 一、技术采用生命周期 技术采用生命周期 如果采用一个新产品&#xff0c;我们就得改变一贯的行为模式&#xff0c;或者改变我们依赖的其他产品或服务&#xff0c;那么&#xff0c;我们对技术采用的态度就变得很重要&#xff0c…

【Cisco Packet Tracer】交换机 学习/更新/泛洪/VLAN实验

交换机的功能是连接计算机、服务器、网络打印机、网络摄像头、IP电话等终端设备&#xff0c;并实现与其它交换机、无线接入点、路由器、网络防火墙等网络设备的互联&#xff0c;从而构建局域网络&#xff0c;实现所有设备之间的通信。 本文使用Cisco Packet Tracer仿真软件&…

数据结构与算法之美学习笔记:29 | 堆的应用:如何快速获取到Top 10最热门的搜索关键词?

目录 前言堆的应用一&#xff1a;优先级队列堆的应用二&#xff1a;利用堆求 Top K堆的应用三&#xff1a;利用堆求中位数解答开篇内容小结 前言 本节课程思维导图&#xff1a; 搜索引擎的热门搜索排行榜功能你用过吗&#xff1f;搜索引擎每天会接收大量的用户搜索请求&#x…

STM32内部温度传感器使用方法详解

STM32内部温度传感器使用方法详解 前言 STM32内部集成了一个片上温度传感器&#xff0c;可以用来测量MCU及周围的温度。测量范围&#xff1a;-40~125&#xff0c;精度1.5℃。虽然精度不高&#xff0c;但在某些应用场景下是够了的&#xff0c;相比于外部接入传感器&#xff0c…

HarmonyOS ArkTS与c++交互通信

一、创建Native C Module 1、右键项目->new->module 如图&#xff1a; 2、修改build-profile.json5配置 "externalNativeOptions": {"path": "./src/main/cpp/CMakeLists.txt","arguments": "-v -DOHOS_STLc_shared&quo…

集成开发环境 PyCharm 的安装【侯小啾python领航班系列(二)】

集成开发环境PyCharm的安装【侯小啾python领航计划系列(二)】 大家好,我是博主侯小啾, 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹…

【EMFace】《EMface: Detecting Hard Faces by Exploring Receptive Field Pyramids》

arXiv-2021 文章目录 1 Background and Motivation2 Related Work3 Advantages / Contributions4 Method5 Experiments5.1 Datasets and Metrics5.2 Ablation Study5.3 Comparison with State-of-the-Arts 6 Conclusion&#xff08;own&#xff09; 1 Background and Motivatio…

flutter-一个可以输入的数字增减器

效果 参考文章 代码 在参考文章上边&#xff0c;主要是改了一下样式&#xff0c;逻辑也比较清楚&#xff0c;对左右两边添加增减方法。 我在此基础上加了_numcontroller 输入框的监听。 加了数字输入框的控制 keyboardType: TextInputType.number, //设置键盘为数字 inputF…

MySQL 基础、进阶、运维的学习笔记

1. MySQL 基础篇 1.1 MySQL 概述 1.1.1 数据库相关概念 数据库(Database, 简称 DB): 存储数据的仓库&#xff0c;数据是有组织的进行存储。 数据库管理系统(Database Management System, 简称 DBMS): 操作和管理数据库的大型软件。 SQL(Structured Query Language, 简称 S…

高并发下缓存失效问题-缓存穿透、缓存击穿、缓存雪崩、Redis分布式锁简单实现、Redisson实现分布式锁

文章目录 缓存基本使用范式暴露的几个问题缓存失效问题---缓存穿透缓存失效问题---缓存击穿一、单机锁正确的锁粒度不正确的锁粒度无法保证查询数据库次数是唯一 二、分布式锁getCatalogJsonData()分布式锁演进---基本原理分布式锁(加锁)演进一&#xff1a;删锁失败导致死锁分布…

『IDEA』代码热部署和热加载

前言 在日常开发中&#xff0c;我们需要经常修改 Java 代码&#xff0c;手动重启项目&#xff0c;查看修改后的效果。如果在项目小时&#xff0c;重启速度比较快&#xff0c;等待的时间是较短的。但是随着项目逐渐变大&#xff0c;重启的速度变慢&#xff0c;等待时间 1-2 min…

第一届云南大学CTF校赛YNUCTF-PWN提示(hint)

文章目录 easy-ikun四种方法 black_ikunsyscall-ikunikun-runner_记第一次校赛出题如何运行服务器?保存镜像 easy-ikun s[i:j] 表示获取a[i]到a[j-1] s[:-1]去掉最后一个字符 s[:-n]去掉最后n个字符 s[-2:]取最后两个字符 s[i:j:k]这种格式呢&#xff0c;i,j与上面的一样&…

android https 证书过期

有的时候 我们android https 证书过期 &#xff0c;或者使用明文等方式去访问服务器 可能会碰到类似的 问题 &#xff1a; javax.net.ssl.SSLHandshakeException: Chain validation failed java.security.cert.CertPathValidatorException: Response is unreliable: its validi…

Pandas进阶:文本处理

引言 文本的主要两个类型是string和object。如果不特殊指定类型为string&#xff0c;文本类型一般为object。 文本的操作主要是通过访问器str 来实现的&#xff0c;功能十分强大&#xff0c;但使用前需要注意以下几点。 访问器只能对Series数据结构使用。 除了常规列变量df.c…

Python 高性能 web 框架 - FastApi 全面指南

原文&#xff1a;Python 高性能 web 框架 - FastApi 全面指南 - 知乎 一、简介 FastAPI 是一个用于构建 API 的现代、快速&#xff08;高性能&#xff09;的 web 框架&#xff0c;使用 Python 3.6 并基于标准的 Python 类型提示。 它具有如下这些优点&#xff1a; 快速&…

【Geoserver】SLD点位样式(PointSymbolizer)设计全通

SLD文件可以控制geoserver的样式管理&#xff0c;这里专门针对点位进行设计&#xff0c;首先点位的设计需要用到这面这个大标签 之前的项目中已经用到了很多关于面的样式管理&#xff0c;这里新学习的是关于点的样式管理 PointSymbolizer 参考资料地址&#xff1a;https://doc…

基于hadoop下的hbase安装

简介 HBase是一个分布式的、面向列的开源数据库&#xff0c;该技术来源于Fay Chang所撰写的Google论文“Bigtable&#xff1a;一个结构化数据的分布式存储系统”。就像Bigtable利用了Google文件系统&#xff08;File System&#xff09;所提供的分布式数据存储一样&#xff0c;…

机器人导航地图——Obstacle层的障碍物-Bresenham算法详细解释

文章目录 前言一、Bresenham算法源码解析1. 函数raytraceFreespace2. 函数inline void raytraceLine3. 函数bresenham2D 二、Bresenham算法——C代码实现总结 前言 作者在读源代码时&#xff0c;遇到了下述的代码void ObstacleLayer::raytraceFreespace&#xff0c;不是很好理…

股票要怎么买入卖出?

股票账户终于开好了&#xff01;恭喜你马上就可以开启刺激的炒股之旅了&#xff01;不过第一次买股票的你是不是还不知道怎么个买法呢&#xff1f;别担心~贴心的汇小鲸带着教程来了&#xff0c;咱们一起看看吧&#xff01; 首先一点&#xff0c;大家得知道&#xff1a;开好户还…

速通MySql

一、简介 1、什么是数据库 数据仓库&#xff0c;用来存储数据。访问必须用SQL语句来访问 2、数据库的类型 1、关系型数据库&#xff1a;Oracle、DB2、Microsoft SQL Server、Microsoft Access、MySQL等 可以用SQL语句方便的在一个表以及多个表之间做非常复杂的数据查询&#…