當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Jquery中使用select2插件实现ajax实时请求数据

發布時間：2025/3/19 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 Jquery中使用select2插件实现ajax实时请求数据小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

場景

效果

select2相關

select2官網：

https://select2.org/

實現

引入select2

頁面中需要引入select.full.min.js和select2.min.css以及jauery。

相關資源下載：

https://download.csdn.net/download/badao_liumang_qizhi/11258768

引入方式具體要根據自己使用的模板或相關技術，如果使用html就是最簡單的引入js文件和css文件的方式。

這里使用的是Thymeleaf模板的方式引入。

Html代碼

select部分的代碼：

注意其class屬性和id以及name屬性。

此select在模態框中，完整模態框代碼：

<div class="modal inmodal" id="apAddAndEidtModel" role="dialog" aria-hidden="true"><div class="modal-dialog" id="apAddAndEidtDiv" th:fragment="apAddAndEidtDiv"><div class="modal-content animated fadeIn"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><spanaria-hidden="true">×</span><span class="sr-only">Close</span></button><i class="fa fa-plus-circle modal-icon pl-1p75"></i><h4 class="modal-title" th:text="${dlgTitle}">添加質檢單明細信息</h4><small><span th:text="${dlgSubtitle}">您可以在此窗口中添加質檢單明細信息</span></small></div><form id="apAddOrEidtForm" role="form"><div class="modal-body"><div class="form-row"><input type="hidden" class="form-control" name="id" id="id"/><input type="hidden" class="form-control" name="op" th:value="${op}"/><input type="hidden" id="serial"><input type="hidden" id="ifEdit"><div class="form-group col-md-6"><div class="form-group " id="fromgroup"><label class="font-normal">物料編碼</label><select class="select2_material form-control" data-placeholder="請選擇一種物料"id="materielNumber" name="materielNumber" ></select></div></div><div class="form-group col-md-6"><label>物料名稱</label><input type="text" readonly class="form-control" name="materielName"/><input type="hidden" readonly class="form-control" name="materielCode"/></div><div class="form-group col-md-6"><label>數量</label><input type="number" placeholder="請輸入數量" class="form-control" name="num" id="num"/></div><div class="form-group col-md-6"><label>供應商批次號</label><input type="text" placeholder="請輸入供應商批次號" class="form-control" name="batch" id="batch"/></div></div></div><div class="modal-footer"><button type="button" class="btn btn-white" data-dismiss="modal">取消</button><button type="submit" class="btn btn-primary">保存</button></div></form></div></div></div>

Jquery部分代碼

需要在頁面加載完成后就初始化select元素，所以代碼寫在：

$(document).ready(function (){});

中。

代碼：

$(document).ready(function (){var select2 = function () {$(".select2_material").select2({dropdownParent: $('.modal-content'),placeholder: "物料編碼/物料名稱",allowClear: true,ajax: {url: '/busMaterielManage/searchMaterielSelectData',dataType: 'json',data: function (params) {var query = {param: params.term //params.term 搜索參數值}return query;},processResults: function (data) {//返回最終數據data 給dataArrayvar dataArray = [];for (var i = 0; i < data.length; i++) {var dataObj = {};dataObj.id = data[i].materielNumber;dataObj.text = data[i].materielNumber + " / " + data[i].materielName;dataArray.push(dataObj);}return {results: dataArray};},error: function (error) {}}});}select2(); });

注：

1.dropdownParent: $('.modal-content')是聲明其父級元素，避免select的下拉框被modal框遮蓋。

2. data: function (params) {
??????????????????????? var query = {
??????????????????????????? param: params.term //params.term 搜索參數值
??????????????????????? }
??????????????????????? return query;
??????????????????? },
就是獲取select框中所輸入的值。

3. url: '/busMaterielManage/searchMaterielSelectData',
通過url請求后臺獲取數據。

4.processResults:是請求數據成功之后的回調方法嗎，將返回的數據封裝并最終賦值給results即可。

5.最后調用上面聲明的函數自身。

后臺邏輯代碼

后臺使用SpringBoot+MyBatisPlus查詢數據，大體思路就是根據傳遞的參數，模糊搜索數據返回一個list。

Controller層：

@Description("獲取物料管理編輯頁面")@ResponseBody@RequestMapping("/searchMaterielSelectData")public List<BusMaterielInfo> searchMaterielSelectData(String param){return busMaterielInfoService.searchMaterielSelectData(param);}

Service層：

?List<BusMaterielInfo> searchMaterielSelectData(String param);

ServiceImpl層：

@Overridepublic List<BusMaterielInfo> searchMaterielSelectData(String param) {List<BusMaterielInfo> materielInfoList=null;try{materielInfoList=new ArrayList<>();if(StringUtils.isBlank(param)){return materielInfoList;}QueryWrapper<BusMaterielInfo> queryWrapper = new QueryWrapper<>();queryWrapper.eq("deleted_flag",0);if(StringUtils.isNotBlank(param)) {queryWrapper.and(wrapper -> wrapper.like("materiel_number", param).or().like("materiel_name", param));}materielInfoList=busMaterielInfoMapper.selectList(queryWrapper);}catch (Exception ex){Log.getInst(this).error(ex.getMessage());}return materielInfoList;}

上面效果中的選擇之后的聯動實現

$("#materielNumber").on("change", function (e) {var materielCode = $("#materielNumber").val();if (materielCode) {$.post({url: "/busMateriel/getOneByCode",data: {code: materielCode}}).done(function (res) {if (res) {$("input[name='materielName']").val(res.materielName);$("input[name='materielCode']").val(res.materielNumber);}})}})

獲取上面select的值并傳遞到后臺請求數據后返回給前臺進行賦值。

總結

以上是生活随笔為你收集整理的Jquery中使用select2插件实现ajax实时请求数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SpringBoot+Swagger2.
下一篇： Thymeleaf在循环时设置递增序号