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

最新推荐文章于 2021-08-05 14:52:42 发布

霸道流氓气质

最新推荐文章于 2021-08-05 14:52:42 发布

阅读量1.3k

点赞数

分类专栏： Jquery 文章标签： select2

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/93714419

版权

Jquery 专栏收录该内容

47 篇文章 1 订阅

订阅专栏

场景

效果

select2相关

select2官网：

https://select2.org/

实现

引入select2

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

Html代码

select部分的代码：

<select class="select2_material form-control" data-placeholder="请选择一种物料"
                                                id="materielNumber" name="materielNumber" >
</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"><span
                            aria-hidden="true">&times;</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 给dataArray
                        var 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层：

@Override
  public 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的值并传递到后台请求数据后返回给前台进行赋值。

霸道流氓气质

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
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引入方式...
复制链接

扫一扫