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

Question

我有一个关于只显示once categories的问题。 我写了一些代码来处理这个过程，但类别显示为twice 。 我指出了问题的出处。

我该如何解决？

这是我的 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>

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

<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>

Answer 1

愿这段代码解决你的问题：

<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>");
    });

}