jq 下拉框多选，并回显到input里

//js
        let selectedList = [];//存放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 type="checkbox" id="${item.roadCentId}" 
                 value="${item.roadCentName}" />${item.roadCentName}</li>`;
        });
        let selectBoxsList = $('.selectBoxs_list').append(html);

        selectBoxsList.find('input').off('change').on('change', function () {
            selectedList = [];
            selectednNList = [];
            $(':checked', selectBoxsList).each((index, obj) => {
                selectedList.push(obj.id);
                selectednNList.push(obj.value);
            });
            // alert("selectedList " + JSON.stringify(selectedList, null, 4));
            // alert("selectednNList " + JSON.stringify(selectednNList, null, 4));
            $('#abc').attr('value', selectednNList)
        });

css 样式自己调

//html
<div class="box">
        <input type="text" disabled id="abc">
        <ul class="selectBoxs_list"></ul>
</div>

//css
.box {
            width: 1000px;
            margin: 50px auto;
        }