Javascript 选中复选框后如何显示多个下拉选择值

我在下拉列表中选择了多个值，基于需要在下面显示的选定值，选中复选框

例如：

多个下拉列表_图像

在输出下面，当我选择多个值时，我需要如下显示：-

我的代码：

$(document).ready(function() {

    $(document).on('change','#tlist', function(){
        $('#tdata').attr('style','display:block;');
        var li = '';
        $('#tlist').each(function() {
            var values = $(this).val() ;
            $.each(values, function( index, value ) {
                var li = $('<input type="checkbox" class="custom-control-input" name="dfield[]" id="' + value + '" value="' + value + '"  checked/><label class="custom-control-label blue" for="' + value + '">' + value + '</label>');
                  $('#tdata').append(li);
            });
        });
    });

$（文档）.ready（函数（）{
$（文档）.on（'change'，'#tlist'，function（）{
$（'#tdata'）.attr（'style'，'display:block；'）；
var li=''；
$（'#tlist'）。每个（函数（）{
var值=$（this.val（）；
$.each（值、函数（索引、值）{
var li=$（''+值+''）；
$（'#tdata'）。追加（li）；
});
});
});

但这里我得到的输出是这样的为什么？我只选择了3个值，所以我只需要显示3个选择的值。但它显示了一些重复的值

输出：

---

包括您的代码，不要发布代码的图像。您会（反复）替换#tdata的内容在JavaQuery <代码>附录< /代码>中，而不是<代码> HTML<代码> > @杰姆斯，我按照您所说的更新了我的代码，但是它显示了重复的值。我已经发布了我的输出。请检查ONCEI我认为您没有检查已经附加的值，或者您可以删除所有附加的数据，BCS您的当前代码将检查每一个。当有人单击复选框并附加它时，在附加新值之前，不要检查值是否已附加或删除one@Swati-是的，现在很好，非常感谢