如何在Javascript中只显示一次类别？

我对只显示一次

类别
有问题。我编写了一些代码来处理这个过程，但是类别显示为
两次。我指出了问题的来源

我怎样才能修好它

这是我的html部分，如下所示

<div class="form-group row">
            <label class="col-sm-4 col-form-label">Select one or more categories:</label>
            <div class="col-sm-8">
                <select class="form-control" th:field="*{categories}" multiple required
                        style="resize: vertical; height: 200px">
                    <th:block th:each="cat : ${listCategories}">
                    <option th:value="${cat.id}">[[${cat.name}]]</option>
                    </th:block>

                </select>
            </div>
        </div>      

        <div class="form-group row">
            <label class="col-sm-4 col-form-label">Chosen categories:</label>
            <div class="col-sm-8">
                <div id="chosenCategories">
                
                </div>
            </div>
        </div>

<script type="text/javascript">
 
    moduleURL = "[[@{/brands}]]";
 
    
    $(document).ready(function() {
        dropdownCategories = $("#categories");
        divChosenCategories = $("#chosenCategories");
 
        dropdownCategories.change(function() {
            divChosenCategories.empty();
            showChosenCategories();
        });
        
        showChosenCategories();  // ISSUE
    });
 
    function showChosenCategories() {
        dropdownCategories.children("option:selected").each(function() {
            selectedCategory = $(this);
            catId = selectedCategory.val();
            catName = selectedCategory.text().replace(/-/g, "");
 
            divChosenCategories.append("<span class='badge badge-secondary m-1'>" + catName + "</span>");
        });
 
    }
    
</script>


选择一个或多个类别：
[${cat.name}]]
选定类别：

下面是我的js脚本代码，如下所示

<div class="form-group row">
            <label class="col-sm-4 col-form-label">Select one or more categories:</label>
            <div class="col-sm-8">
                <select class="form-control" th:field="*{categories}" multiple required
                        style="resize: vertical; height: 200px">
                    <th:block th:each="cat : ${listCategories}">
                    <option th:value="${cat.id}">[[${cat.name}]]</option>
                    </th:block>

                </select>
            </div>
        </div>      

        <div class="form-group row">
            <label class="col-sm-4 col-form-label">Chosen categories:</label>
            <div class="col-sm-8">
                <div id="chosenCategories">
                
                </div>
            </div>
        </div>

<script type="text/javascript">
 
    moduleURL = "[[@{/brands}]]";
 
    
    $(document).ready(function() {
        dropdownCategories = $("#categories");
        divChosenCategories = $("#chosenCategories");
 
        dropdownCategories.change(function() {
            divChosenCategories.empty();
            showChosenCategories();
        });
        
        showChosenCategories();  // ISSUE
    });
 
    function showChosenCategories() {
        dropdownCategories.children("option:selected").each(function() {
            selectedCategory = $(this);
            catId = selectedCategory.val();
            catName = selectedCategory.text().replace(/-/g, "");
 
            divChosenCategories.append("<span class='badge badge-secondary m-1'>" + catName + "</span>");
        });
 
    }
    
</script>


moduleURL=“[[@{/brands}]]”；
$（文档）.ready（函数（）{
下拉类别=$（“#类别”）；
divChosenCategories=$（“chosenCategories”）；
dropdownCategories.change（函数（）{
divChosenCategories.empty（）；
showChosenCategories（）；
});
showChosenCategories（）；//问题
});
函数showChosenCategories（）{
dropdownCategories.children（“选项：选中”）.each（函数（）{
selectedCategory=$（此项）；
catId=selectedCategory.val（）；
catName=selectedCategory.text（）.replace（/-/g，“”）；
追加（“+catName+”）；
});
}
此代码可以解决您的问题：

<script type="text/javascript">

moduleURL = "[[@{/brands}]]";


$(document).ready(function() {
    dropdownCategories = $("#categories");
    divChosenCategories = $("#chosenCategories");

    dropdownCategories.change(function() {
        divChosenCategories.empty();
        showChosenCategories();
    });
    
    showChosenCategories();  // ISSUE
});

function showChosenCategories() {
    dropdownCategories.children("option:selected").each(function() {
        selectedCategory = $(this);
        catId = selectedCategory.val();
        catName = selectedCategory.text().replace(/-/g, "");
        $('#remove-'+catId).remove();
        divChosenCategories.append("<span id='remove-"+catId+"' class='badge badge-secondary m-1'>" + catName + "</span>");
    });

}


moduleURL=“[[@{/brands}]]”；
$（文档）.ready（函数（）{
下拉类别=$（“#类别”）；
divChosenCategories=$（“chosenCategories”）；
dropdownCategories.change（函数（）{
divChosenCategories.empty（）；
showChosenCategories（）；
});
showChosenCategories（）；//问题
});
函数showChosenCategories（）{
dropdownCategories.children（“选项：选中”）.each（函数（）{
selectedCategory=$（此项）；
catId=selectedCategory.val（）；
catName=selectedCategory.text（）.replace（/-/g，“”）；
$（'#remove-'+catId）.remove（）；
追加（“+catName+”）；
});
}
如果您选择、取消选择然后再次选择一个类别，它是否会显示两次？或者如果你再做一次，就要做三次？以此类推……在我的测试中，您的代码看起来和工作都很好。不知道在哪里打了两次电话。将HTML添加到您的sample@JohnTyner我编辑了我的文章。@LaurentS。我编辑了我的文章。这次编辑并没有让你的问题变得更清楚。“显示类别”没有任何意义。。。请描述预期结果和您当前获得的内容我编辑了我的帖子。是的，这样您就可以用此
$（'#remove span'）.last（）.remove（）替换函数中的最后一行；追加（“+catName+”）@AIASADWAIL我试过了，但没用。如果有3个类别，则会反复列出为3个类别和3个相同类别。这就是为什么我有9个类别。当我选择2个类别时，列出了4个类别。过程是这样的。我如何解决它？我现在就尝试。