當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2025/3/19 编程问答 16 豆豆

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

場(chǎng)景

效果

select2相關(guān)

select2官網(wǎng)：

https://select2.org/

實(shí)現(xiàn)

引入select2

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

相關(guān)資源下載：

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

引入方式具體要根據(jù)自己使用的模板或相關(guān)技術(shù)，如果使用html就是最簡(jiǎn)單的引入js文件和css文件的方式。

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

Html代碼

select部分的代碼：

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

此select在模態(tài)框中，完整模態(tài)框代碼：

<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}">添加質(zhì)檢單明細(xì)信息</h4><small><span th:text="${dlgSubtitle}">您可以在此窗口中添加質(zhì)檢單明細(xì)信息</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="請(qǐng)選擇一種物料"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>數(shù)量</label><input type="number" placeholder="請(qǐng)輸入數(shù)量" class="form-control" name="num" id="num"/></div><div class="form-group col-md-6"><label>供應(yīng)商批次號(hào)</label><input type="text" placeholder="請(qǐng)輸入供應(yīng)商批次號(hào)" 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部分代碼

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

$(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 搜索參數(shù)值}return query;},processResults: function (data) {//返回最終數(shù)據(jù)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')是聲明其父級(jí)元素，避免select的下拉框被modal框遮蓋。

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

3. url: '/busMaterielManage/searchMaterielSelectData',
通過(guò)url請(qǐng)求后臺(tái)獲取數(shù)據(jù)。

4.processResults:是請(qǐng)求數(shù)據(jù)成功之后的回調(diào)方法嗎，將返回的數(shù)據(jù)封裝并最終賦值給results即可。

5.最后調(diào)用上面聲明的函數(shù)自身。

后臺(tái)邏輯代碼

后臺(tái)使用SpringBoot+MyBatisPlus查詢數(shù)據(jù)，大體思路就是根據(jù)傳遞的參數(shù)，模糊搜索數(shù)據(jù)返回一個(gè)list。

Controller層：

@Description("獲取物料管理編輯頁(yè)面")@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;}

上面效果中的選擇之后的聯(lián)動(dòng)實(shí)現(xiàn)

$("#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的值并傳遞到后臺(tái)請(qǐng)求數(shù)據(jù)后返回給前臺(tái)進(jìn)行賦值。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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