若依多模块使用下拉列表 select2的搜索功能

最新推荐文章于 2024-06-24 11:26:29 发布
最新推荐文章于 2024-06-24 11:26:29 发布
阅读量3.5k 收藏 3
点赞数 1
分类专栏： j2ee开发 若依 文章标签： java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32024669/article/details/104185602
版权

若依多模块使用下拉列表 select2的搜索功能

1.熟悉若依对于资源引用方法

footer的模块资源的定义

在这里插入图片描述

footer模块资源的引用

在这里插入图片描述

由此可以看出通过 th::fragment属性 可以定义某个模块资源
通过th::include可以引入资源

2.定义select2模块资源并引入

在这里插入图片描述在include文件中我们可以看到select2相关的模块资源已经被定义好，这里我们可以直接引入

head标签中引入 select2 css模块资源

在这里插入图片描述

footer之后引入 select2 js模块资源

在这里插入图片描述
因为js中可能使用到了与jq的相关标签，jq的引入是在footer模块资源中，所以我们在footer之后引入才能正确实现显示搜索框的效果

3.效果图

在这里插入图片描述
在这里插入图片描述
一行代码都不用写，实在是太happy了，我爱若依 我爱select2。

怪侠沈剑心
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
关于layui 下拉列表的change事件详解
12-13
在使用layui这个优秀的前端框架时，经常会遇到需要对下拉列表（select）进行交互操作的情况。layui提供了丰富的API和事件来处理这些需求，其中`change`事件是一个关键的交互事件，用于监听用户在下拉列表中选择选项...
若依前端vue实现 输入框下拉选择加搜索用户
qq_45765384的博客
05-23 611
前端输入框下拉选择加搜索用户
select2搜索选择给多个文本框赋值
qq_41780231的博客
12-20 518
1、先看效果图 2、 代码实现 前端页面实现 orderFormAdd.html <div class="wrapper wrapper-content animated fadeInRight ecommerce"> <div class="row"> <form class="form-horizontal" id="orderFormAd...
若依框架form表单重置功能reset与select2组件不兼容问题处理
人的一生就是在学习的道路上不断进步
06-06 169
若依框架form表单重置功能reset与select2组件不兼容问题处理
若依框架下拉单选框根据js动态加载，如何使select2的下拉搜素功能同时生效（达到select下拉框的样式不变的效果）
最新发布
人的一生就是在学习的道路上不断进步
06-24 200
若依框架下拉单选框根据js动态加载，如何使select2的下拉搜素功能同时生效（达到select下拉框的样式不变的效果）
若依select2多选赋值
wuyaohui233的博客
06-25 800
【代码】若依select2多选赋值。
若依 bootstrap-select2 下拉框 分组多选 分组单选
test
12-31 5505
先引入select2的css及js /*前提是引入jQuery*/ <link href="/ajax/libs/select2/select2.min.css" rel="stylesheet"/> <link href="/ajax/libs/select2/select2-bootstrap.css" rel="stylesheet"/> <...
若依form中点击重置按钮,select2选中项不会被重置
猿小白的博客
08-07 617
若依form中点击重置按钮,select2选中项不会被重置问题，下面提供解决办法。如图所示,点击重置按钮后, 值被重置为初始状态, 而select2仍然选中之前的选项。
ruoyi(若依)框架学习
fxm_fxm123456的博客
03-03 7068
ruoyi(若依)官网：https://www.ruoyi.vip学习开发文档。 RuoYi是一个后台管理系统，基于经典技术组合（Spring Boot、Apache Shiro、MyBatis、Thymeleaf）主要目的让开发者注重专注业务，降低技术难度，从而节省人力成本，缩短项目周期，提高软件安全质量。 在线体验 项目地址：http://www.ruoyi.vip(opens new window) 账号密码：admin/admin123 系统需求 JDK >= 1.8 MySQL >=
若依框架中给select2赋值时选中项不会更改
danbaiQAQ的博客
12-22 173
在ry-ui.js表单重置项中添加以下代码。在与select2元素赋值时失效。
jQuery轻量级模块化select下拉列表框插件
12-11
select3是一款基于jQuery或Zepto.js的轻量级模块化select下拉列表框插件。select3下拉列表框可以进行单选、以tag的形式进行多选、可以指定输入类型格式、可以进行分组选择、还可以ajax进行远程调用。
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
11-30
在开发Web应用时，我们经常需要创建自定义的下拉列表以实现更加丰富的交互效果，而HTML原生的`<select>`元素往往无法满足这些需求。本文将介绍如何使用Vue.js来实现一个功能，即当用户在下拉列表区域外点击时自动...
下拉列表 可输可选 select
12-10
通过上述步骤和GooCombo组件，我们可以实现一个功能强大且用户体验良好的“可输可选”下拉列表，既保留了`<select>`标签的便捷性，又增加了更多的交互可能性。在实际项目中，这样的组件能够显著提升用户满意度，为...
select3是一款基于jQuery或Zeptojs的轻量级模块化select下拉列表框插件
08-09
select3是一款基于jQuery或Zepto.js的轻量级模块化select下拉列表框插件。select3下拉列表框可以进行单选、以tag的形式进行多选、可以指定输入类型格式、可以进行分组选择、还可以ajax进行远程调用。
select2下拉列表插件实现select单选和多选
abiao555的博客
09-26 787
单选 <!--课程选择select2--> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script> <div c
Unknown collation: ‘utf8mb4_0900_ai_ci‘ 的解决方案
热门推荐
枯木何日可逢春
05-19 2万+
原因分析 将MySQL8.0生成的sql文件，导入MySQL5.7版本时，出现了版本不兼容问题 解决方案 将MySQL8.0导出的sql文件中，所有的utf8mb4_0900_ai_ci替换为utf8_general_ci，以及所有的utf8mb4替换为utf8
基于若依框架，班级下拉框查询
噗嗤
11-24 3562
基于若依框架，班级下拉框查询 第一步：先在后端查询出班级表中的内容，就是在xml配置项中重新编写个SQL语句，用于查询 <select id="selectSysClassAll" parameterType="Integer" resultMap="SysClassResult"> <include refid="selectSysClassVo"/> </select> 下图中的代码，我就不再在此编写了 第二步：我们将我们查询的数据通
select2和模态框结合，去除覆盖不显示问题
weixin_33688840的博客
03-27 282
2019独角兽企业重金招聘Python工程师标准>>> ...
python中matlaibplot中下拉列表控件怎么使用
06-01
matplotlib中提供了一个叫做"widgets"的模块，可以用于创建各种交互式的小部件，包括下拉列表控件。以下是一个简单的例子，演示如何在matplotlib中创建一个下拉列表控件： ```python import matplotlib.pyplot as plt from matplotlib.widgets import Dropdown # 定义一个列表，包含所有可能的field_name值 field_name_options = ['field_name1', 'field_name2', 'field_name3'] # 定义一个回调函数，当用户选择一个新的值时触发 def on_select_field_name(val): # 在这里插入你需要更新的代码，例如重新绘制图形等 print('You selected:', val) # 创建一个下拉列表控件，并将其选项与上面定义的列表关联 dropdown_field_name = Dropdown(plt.axes([0.1, 0.95, 0.8, 0.05]), field_name_options) # 绑定回调函数到控件上 dropdown_field_name.on_select(on_select_field_name) # 显示图形 plt.show() ``` 在这个例子中，我们首先定义了一个包含所有可能的field_name值的列表。然后，我们使用`Dropdown`类创建了一个下拉列表控件，并将其选项与上面定义的列表进行关联。接着，我们定义了一个回调函数`on_select_field_name`，当用户选择一个新的值时将会被调用。最后，我们将回调函数绑定到控件上，并显示图形。当用户选择一个新的值时，回调函数`on_select_field_name`将会被调用，并打印出所选的值。你可以在这个回调函数里面插入你需要更新的代码，例如重新绘制图形等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值