首页 > 其他分享 >jq 多选下拉框 数据回显

jq 多选下拉框 数据回显

时间:2023-10-26 10:35:46浏览次数:28  
标签:selectednNList console 回显 list jq let roadCentName selectedList 下拉框

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)

 })

标签:selectednNList,console,回显,list,jq,let,roadCentName,selectedList,下拉框
From: https://www.cnblogs.com/sishe/p/17788831.html

相关文章