初识select2

最新推荐文章于 2025-06-11 09:19:59 发布

原创最新推荐文章于 2025-06-11 09:19:59 发布 · 487 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#select2

select2 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Angular项目中引入并使用Select2组件。主要包括引入必要的JS和CSS文件、构建数据模型、在HTML中调用数据等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、内容介绍

2、步骤介绍

① 引入js与css

<link rel="stylesheet" href="../plugins/select2/select2.css" />
<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../js/angular-select2.js"></script>

注意：因为本项目是angular框架，因此需要引入select2与angular整合js

② 构建data数据

$scope.brandList={data:[{id:1,text:’小米’},{id:2,text:联想},{id:2,text:三星},{id:2,text:中兴},{id:2,text:VIVO}]};//品牌列表

③ 在html页面调用data数据

<input select2 config="brandList" select2-model="entity.brandIds">

注意：config内容来源于第二步的brandList。select2-model代表选择数据绑定的位置。

④ 效果如下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

javashareauthor

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端插件之Select2使用

weixin_30458043的博客

07-30

671

工欲善其事，必先利其器本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件，上一篇文章介绍了bootstrap-duallistbox这个插件的使用，这一篇开始Select2的征服之旅 Select2是一款基于JQuery的下拉列表插件，主要用来优化select，支持单选和多选，同时也支持分组显示、列表检索、远程获取数据等众多好用的功能项目地址：https://selec...

select2.js

07-27

select2.min.js插件！！！=

参与评论您还未登录，请先登录后发表或查看评论

selec2知识

xzjforDream的博客

10-15

257

1.使用ng-model 与select2-model 的区别：当只需要返回一个值时用ng-model 存储数据当需要返回一个json格式的数据时，用 select2-model接收数据（例如： data[{“id”:27,“text”:“网络”},{“id”:32,“text”:“机身内存”}] ） ...

Angular-UI ui-select 组件：append-to-body 特性深度解析

热门推荐

沉默王二

05-19

2万+

select2是一款jquery插件，是普通form表单select组件的升级版。可以定制搜索、远程数据集（Remote data，本篇主要介绍点）、无限滚动（数据分页功能，这一点很妙）、还有很多高端的参数设置（有需要的下次介绍）。

select2介绍

fendou_0123456789的博客

09-04

252

http://www.topfe.cn/jquery/506.html 本人做笔记参考使用

select2使用

weixin_40442091的博客

04-15

742

@param {string} type - 时间格式类型，支持 "YYYYMMDD", "HHMMSS", 默认为 "YYYY-MM-DD HH:MM:SS"url: '/app/cash/role/userInfoLikeQry.do', // 设置请求的目标URL。url: '/admin/user/login.do', // 设置请求的目标URL。

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/

头歌初识redis答案.rar

06-07

在头歌平台初识Redis的答案可以总结如下：一、基础知识 Redis数据库数量： Redis默认有16个数据库，可以使用select命令进行切换。数据库大小与键的查看：使用DBSIZE命令查看当前数据库的大小（即键的数量）。 ...

select2新版中文语言包

12-04

select2的新版中文语言包。下载后直接引入即可。放在select2.full.min.js后引入语言包。在代码里加入 language: "zh-CN"即可。

select2-example:运行示例select2

05-10

select2-example

select2插件

09-23

非常好用的下拉框插件，支持级联选择，加图片等等。。。

select2 -- js

06-01

select2 js ;使用方法： $('#select').select2({ placeholder: '请选择' });

select2.js/select2.css

01-06

select2资源包。里面包含select2相关的js、css，解压后在dist目录下可找到。使用select2需要搭配jquery1.8以上版本。在这资源包的vendor文件夹下有jquery2.1的版本

python soup.find_初识python 之爬虫：BeautifulSoup 的 find、find_all、select 方法

weixin_39637975的博客

12-08

3148

from bs4 import BeautifulSouplxml 以lxml形式解析html，例：BeautifulSoup(html,'lxml') #注：html5lib 容错率最高find 返回找到的第一个标签find_all 以list的形式返回找到的所有标签limit 指定返回的标签个数attrs 将标签属性放到一个字典中string 获取标签下的非标签字符串(值), 返回字符串st...

初识MyBatis

05-06

【初识MyBatis——实现增删改查详解】 MyBatis是一款优秀的持久层框架，它支持定制化SQL、存储过程以及高级映射。MyBatis避免了几乎所有的JDBC代码和手动设置参数以及获取结果集。MyBatis可以使用简单的XML或注解...

初识MyBatis及基本配置和执行

08-28

初识MyBatis及基本配置和执行 MyBatis 是一款优秀的持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来...

头哥初识opengauss

03-12

<think>嗯，用户问的是“头哥初识openGauss”，首先得确定“头哥”指的是谁。可能是指某个技术博主或者教育平台，比如头哥教学实践平台，他们可能有相关的课程或实验介绍。然后需要理解用户的需求，可能是想了解openGauss的基本信息，或者如何在头哥平台上学习它。接下来，我需要确认openGauss的基本情况。openGauss是华为开源的关系型数据库，基于PostgreSQL，强调高性能、高安全和高可靠性。适用于企业级应用，如金融、电信等。关键特性包括分布式架构、AI优化、安全机制等。然后，用户提到“头哥初识”，可能是指头哥平台上的入门实验。可能需要介绍实验内容，比如安装配置、基础操作、SQL练习等。这些内容帮助用户从零开始接触openGauss，掌握基本技能。还要考虑用户可能的真实需求。他们可能想开始学习openGauss，但不知道从哪里入手，或者需要推荐学习资源。这时候，除了介绍头哥平台的实验，还可以补充其他学习途径，比如官方文档、社区论坛、在线课程等。同时，要确保回答结构化，分点说明，比如先介绍openGauss，再讲头哥平台的相关内容，最后给出学习建议。注意使用正确的LaTeX格式，虽然用户的问题中没有数学公式，但按照系统指令，如果有相关内容需要正确应用格式。可能还需要验证一些信息，比如头哥平台是否确实有openGauss的实验，确保信息的准确性。如果有不确定的地方，应该用建议性的语言，比如“通常包含以下内容”，避免绝对化表述。最后，确保语言口语化，自然流畅，避免使用专业术语过多，或者适当解释术语，让不同层次的用户都能理解。检查是否符合用户的中文回答要求，结构是否清晰，分步骤讲解，帮助用户逐步了解openGauss和相关的学习路径。</think>### 头哥初识 openGauss 分步解析 #### 一、认识 openGauss 基础 1. **定义与背景** - openGauss 是华为开源的企业级关系型数据库，基于 PostgreSQL 内核深度优化 - 主打高性能、高安全、高可用特性，适用于金融、电信等关键领域 - 支持分布式架构，提供 AI 增强的智能运维能力 2. **核心特性对比** ```plaintext | 特性 | 传统数据库 | openGauss | |--------------|------------------|--------------------| | 扩展性 | 垂直扩展为主 | 水平分布式扩展 | | 性能优化 | 常规索引 | AI 索引推荐 | | 安全性 | 基础权限控制 | 全密态计算+数据脱敏| | 部署成本 | 商业授权费用高 | 开源免费 | ``` #### 二、头哥实验平台学习路径 1. **实验环境搭建** - 通过头哥平台获取预置实验环境 - 验证安装： ```bash $ gsql -V # 查看版本 gsql (openGauss) 3.0.0 ``` 2. **基础操作实验** ```sql -- 创建实验数据库 CREATE DATABASE mogu_db WITH ENCODING 'UTF8'; -- 建表示例 CREATE TABLE user_profile ( user_id INT PRIMARY KEY, username VARCHAR(50) NOT NULL, reg_date DATE DEFAULT CURRENT_DATE ); -- 插入测试数据 INSERT INTO user_profile VALUES (1, '头哥学员', '2023-01-01'); ``` 3. **事务控制实践** ```sql BEGIN; UPDATE account SET balance = balance - 100 WHERE user_id = 1001; UPDATE account SET balance = balance + 100 WHERE user_id = 1002; COMMIT; ``` #### 三、关键技术点解析 1. **列存引擎实践** ```sql CREATE TABLE sensor_data ( device_id INT, log_time TIMESTAMP, temperature FLOAT ) WITH (ORIENTATION = COLUMN); ``` 2. **AI 特性体验** ```sql -- 创建AI模型 CREATE MODEL price_predict USING linear_regression FEATURES area, floor TARGET price FROM housing_data; ``` #### 四、常见问题解决方案 1. **连接问题排查** - 检查服务状态： ```bash $ gs_ctl status -D /var/lib/opengauss/data ``` - 验证端口监听： ```bash $ netstat -tuln | grep 5432 ``` 2. **性能优化技巧** - 使用执行计划分析： ```sql EXPLAIN (ANALYZE, COSTS OFF) SELECT * FROM orders WHERE total_price > 1000; ``` #### 五、扩展学习建议 1. **进阶学习路线** ``` 1. 分布式部署 → 2. 容灾方案 → 3. 安全加固 → 4. AI 运维 → 5. 源码研究 ``` 2. **推荐学习资源** - 官方文档：https://opengauss.org/zh/docs/ - 社区问答：https://gitee.com/opengauss - 华为云学院 openGauss 认证课程 #### 六、验证学习成果完成头哥平台实验后，可尝试： 1. 在虚拟机独立部署 openGauss 2. 设计小型电商系统数据库 3. 实现跨节点的分布式查询通过以上分阶段学习，可系统掌握 openGauss 的核心操作与设计理念。建议每周投入 6-8 小时进行实践，遇到问题及时查阅官方文档或参与社区讨论。