三步解决在jsp中用select2实现下拉菜单动态模糊查询的问题

秦无解423

已于 2023-08-24 09:53:04 修改

阅读量2.8k

点赞数 3

文章标签： java 开发语言 javascript 前端 css

于 2023-06-08 10:56:51 首次发布

本文链接：https://blog.csdn.net/weixin_69687927/article/details/131101903

版权

秦医如毒，无药可解。

话不多说，上select2的官方文档:https://select2.github.io

首先，展示最终实现效果——

点击下拉框，出现输入框以及动态参数，在输入框中输入文字，则可对动态参数进行搜索、选择：

（不要在意马赛克，个人布局没布好，最后实在懒得改了，不影响使用）

如果觉得效果符合自身需求的，那么可以继续往下看。

内容短小精悍，十分简单粗暴。

接下来展示的，是 未加入模糊查询修改 时候的前端样式和代码截图——

jsp页面下拉框代码：（ ${horganList}是从后端接口model.addAttribute("horganList",horganList)获取的，其数据格式是

List<Map<String, Object>>

如果初学者对于这里不太了解，可以稍微百度下）

<select name="horgan" id="horgan">
   <option value="">请选择</option>
   <c:forEach items="${horganList}" var="horgans">
      <option value="${horgans.UNIT}">${horgans.UNIT}</option>
   </c:forEach>
</select>

👆这里之所以写${horgans.UNIT}，是因为我在数据库查找出的、想要模糊下拉查询的字段是UNIT。

倘若我想要模糊下拉查询的字段是name，xml里的sql为

select name from 表名

那么这里就需要写成${horgans.name}

前端最终展示效果：

以上是中规中矩的正常展示效果，接着，就是将它修改为 加入模糊查询修改 的步骤了——

划重点！！！

第一步：先在下拉框代码所在jsp页面的顶部，加上select2所必需的css和js样式：

	<%--	下拉模糊查询--%>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

第二步：再原有的jsp页面下拉框的select代码后方，加上 class="select2-input"：

<select name="horgan" id="horgan" class="select2-input">
   <option value="">请选择</option>
   <c:forEach items="${horganList}" var="horgans">
      <option value="${horgans.UNIT}">${horgans.UNIT}</option>
   </c:forEach>
</select>

第三步：在jsp页面的<body> <script> 代码 </script> </body>中，加入这些代码，用以开启效果：

<%--    下拉模糊查询--%>
$(".select2-input").select2({
   placeholder: '请选择',
   allowClear: true
});

前端最终展示效果：

成功

此章暂时完结。

秦无解423

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
三步解决在jsp中用select2实现下拉菜单动态模糊查询的问题

jsp页面下拉框代码：（ ${horganList}是从后端接口model.addAttribute("horganList",horganList)获取的，如果初学者对于这里不太了解，可以稍微百度下）（不要在意马赛克，个人布局没布好，最后实在懒得改了，不影响使用）以上是中规中矩的正常展示效果，接着，就是将它修改为。如果觉得效果符合自身需求的，那么可以继续往下看。时候的前端样式和代码截图——首先，展示下摸索了半天后的。秦医如毒，无药可解。
复制链接

扫一扫