jq 多选下拉框 数据回显 模糊查询

html

 

<div class="col-sm-8 boxs" id="SupplierDiv" style="position:relative;">

<input style="width:392px;" type="text" disabled id="abc">
<ul class="selectBoxs_list"></ul>

</div>

 

 

$(document).ready(function () {

//js
//let selectedList = ['1asdfjasdfasdfa223skkdfasdf','1asdfjasdfasdfas1sdgdfasdf'];//存放id
//let selectednNList = [];//存放名字
//模拟后台数据
let centRoadInfoVoList = [{
roadCentId: "1asdfjasdfasdfa223skkdfasdf",
roadCentName: "宁夏"
}, {
roadCentId: "1asdfjasdfasdfas1sdgdfasdf",
roadCentName: "芜湖"
}, {
roadCentId: "1asdfjasdfadfasdfdghjsasdf",
roadCentName: "大连"
}, {
roadCentId: "1asdfjasdfasdfasdfasdagsdf",
roadCentName: "无锡"
}, {
roadCentId: "1asdfjasdfasdfas1222dfasdf",
roadCentName: "苏州"
}, {
roadCentId: "1asdfjasdfasdfass3dfffasdf",
roadCentName: "上海"
},];

let html = "";
centRoadInfoVoList.forEach(item => {
html +=
`<li><input class="box_list" type="checkbox" id="${item.roadCentId}"
value="${item.roadCentName}" />${item.roadCentName}</li>`;
});
//let selectBoxsList = $('.selectBoxs_list').append(html);

 

let selectBoxsList = $('.selectBoxs_list').append(html);
selectBoxsList.find('input').off('change').on('change', function () {
selectedList = [];
selectednNList = [];
console.log(selectBoxsList[0], 'selectBoxsList')
console.log($(':checked', selectBoxsList)[0], '85858')
$(':checked', selectBoxsList).each((index, obj) => {

console.log(obj, 'obj')
selectedList.push(obj.id);
selectednNList.push(obj.value);
});
// alert("selectedList " + JSON.stringify(selectedList, null, 4));
// alert("selectednNList " + JSON.stringify(selectednNList, null, 4));
console.log(selectednNList,'selectednNList')
$('#abc').attr('value', selectednNList)

console.log(selectedList, 'selectedList')
console.log(selectednNList, 'selectednNList')
OrgNodes()
});

 

 

//回显

let listdata = $.trim(cbDom.attr("data-ShopCodes")).split(",")
//let listdata = ['/1/1/10/', '/1/1/3/']
console.log(listdata, '获取参加店面')
let list = $('.box_list')
for (let i = 0; i < listdata.length; i++) {
for (let j = 0; j < list.length; j++) {
if (list[j].id == listdata[i]) {
selectedList.push(list[j].id);
selectednNList.push(list.eq(j).val());
console.log(list[j].id,
'获取参加店面36')

list.eq(j).prop("checked", true)

}
}
}
$('#abc').attr('value', selectednNList)

 }）

 

 

 

 

模糊查询

<input style="margin:10px;" type="text" id="search" name="name" value="" />

$(document).ready(function () {
$("#search").keydown(function (e) {
if (e.keyCode == 13) {
//回车事件触发的代码
let list = ['苹果', '香蕉', '西瓜', '草莓', '蓝莓', '菠萝']
let searchKeyword = $("#search").val()
const reg = new RegExp(searchKeyword, 'i') // 创建不区分大小写的正则表达式
return list.filter(item => reg.test(item)) //
console.log(list.filter(item => reg.test(item)))
}
})
});