场景

效果

实现

html页面代码

页面使用的是thymeleaf模板。

下拉框代码：

<div class="form-group row col-md-6"><label class="col-sm-2 col-form-label">退货发起方</label><div class="col-sm-10"><select class="form-control" name="businessInitiator"  id="businessInitiator"><option  id="yuanliaoInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '原料立库'}" value="原料立库"><span th:text="原料立库"></span></option><option  id="qingjieInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '清洁车间'}" value="清洁车间"><span th:text="清洁车间"></span></option><option  id="zhengjiInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '正极车间'}" value="正极车间"><span th:text="正极车间"></span></option><option  id="fujiInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '负极车间'}" value="负极车间"><span th:text="负极车间"></span></option><option value="" disabled selected hidden>选择退货发起方</option></select></div></div>

input框代码：

<div class="form-group row col-md-6"><label class="col-sm-2 col-form-label">退货目的地</label><div class="col-sm-10"><input type="text" class="form-control" name="destination" id="destination"readonly></div> </div>

dataTables代码：

 <table id="example" class="table table-striped table-bordered hover" style="width:100%"><thead><tr><th><input type="checkbox" class="checkall" /></th><th>货位编号</th><th>货位类型</th><th>物料类型</th><th>物料状态</th><th>所在货架</th><th>备注</th></tr></thead><tbody></tbody> </table>

Jquery代码

$(document).ready(function() {//选择退货方后退货目的地绑定联动$("#businessInitiator").bind("change", function () {//获取选中的option的value值var selected = $("#businessInitiator option:selected").val();//获取退货目的地Input对象var destination = $("#destination");switch (selected){case '原料立库':destination.val("原料立库退货点")break;case '清洁车间':destination.val("清洁车间退货点")break;case '正极车间':destination.val("正极车间退货点")break;case '负极车间':destination.val("负极车间退货点")break;default:destination.val("其它退货点")}//退货目的地联动完成// DataTable初始化$("#example").dataTable().fnDestroy();//还原初始化了datatablevar t = $('#example').DataTable({"language": {"processing": "处理中...","lengthMenu": "显示 _MENU_ 项结果","zeroRecords": "没有匹配结果","info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项","infoEmpty": "显示第 0 至 0 项结果，共 0 项","infoFiltered": "(由 _MAX_ 项结果过滤)","infoPostFix": "","search": "搜索:","searchPlaceholder": "搜索...","url": "","emptyTable": "表中数据为空","loadingRecords": "载入中...","infoThousands": ",","paginate": {"first": "首页","previous": "上页","next": "下页","last": "末页"},"aria": {paginate: {first: '首页',previous: '上页',next: '下页',last: '末页'},"sortAscending": ": 以升序排列此列","sortDescending": ": 以降序排列此列"},"decimal": "-","thousands": "."},"processing": true,"searching" : false,"pageLength": 100,"serverSide": true,"columnDefs": [ {"searchable": false,"orderable": false,"targets": "_all",}],"dom": '<"top">rt<"bottom"flpi><"clear">',columns: [{ data: 'id' ,"orderable" : false},{ data: 'goodsLocationNumber' },{ data: 'locationTypeName' ,"orderable" : false},{ data: 'saveMaterialTypeName' ,"orderable" : false},{ data: 'materielStatusName',"orderable" : false},{ data: 'shelveName' ,"orderable" : false},{ data: 'remark',"orderable" : false }],columnDefs: [{//   指定第1列，从0开始，0表示第一列，1表示第二列……"targets": 0,"bSortable": false,"render": function(data, type, row, meta) {if (row.isSelected == 1){return '<input type="checkbox" class="checkchild" onclick="childClick(this)" checked="checked" value="' + row.id + '" />'}return '<input type="checkbox" class="checkchild" onclick="childClick(this)" value="' + row.id + '" />'}}],"ajax": function (data, callback, setting) {data.editActionId = $("#refundOrderId").val();data.selected=selected;$.ajax({type: 'POST',url: "/busGoodsLocation/getRejectsLocationsList",cache: false,  //禁用缓存//async: true,data: JSON.stringify(data),  //传入组装的参数contentType: "application/json",dataType: "json",success: function (result) {callback(result);}})}});}); });

注：

1.页面加载完成后绑定下拉框 select的change事件，获取选中的option的值，通过case进行比较，进而给input进行赋值。

2.然后要还原一次dataTables的初始化，执行初始化的dataTables的初始化并请求数据。

3.将selected作为选中的值进行请求数据的参数，进而后台根据传递的值查询并返回不同的数据。

总结

以上是生活随笔为你收集整理的Jquery控制select实现dataTables数据联动刷新的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。