Question

我正在调用我的本地API，它会在触发onchange事件时返回产品列表。

我还为每个数组创建新的选项元素，并为其设置名称和值。创建的元素附加在select元素上。

但问题是。例如，第一次调用返回1个数组，第二次调用api返回2个数组。

所以在第二次调用时，3个选项元素将在表单上呈现，而它应该只有2个选项元素。

 <form class="form-horizontal" id="productForm" 
  th:action="@{/addProduct}" method="post">


    <div class="form-group">
        <div th:if="${productAdded}">
            <div class="alert alert-success">
                <p>Product added successfully</p>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-2" for="category">Category:</label>
        <div class="col-sm-10">
            <select class="form-control" id="category" name="category">
                <option th:name="category"  th:each="cat : ${categories}" 
                th:value="${catth:text="${cat.category}"></option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-2" for="productName">Name:</label>
        <div class="col-sm-10" >
        <select  class="form-control" id="productName"></select>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-2" for="category">Price:</label>
        <div class="col-sm-10">
            <input type="number" class="form-control"
                               placeholder="Product Price" name="price" id="price">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="category">Quantity:</label>
                    <div class="col-sm-10">
            <input type="number" class="form-control"
                   placeholder="Quantity" name="quantity">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="category">Vendor:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control"
                   placeholder="Product Vendor" name="vendor" id="vendor">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form>

AddProduct.js

//adding event listener to category select box
document.getElementById("category")
.addEventListener('change',getProductDetails);
let products = document.getElementById("productName");
let prodPrice = document.getElementById("price");
let prodVendor = document.querySelector("#vendor");
let productForm = document.querySelector('#productForm');
console.log(productForm);


function getProductDetails() {
    let category = document.getElementById("category").value;
    fetch("
    http://localhost:6080/getProductDetailsByCategory?category="+category)
        .then((res) => res.json())
.then((data) => {
        console.log(data)
    if(data ==null || data.length ==0){
            refresh();
    }

    data.forEach(function (t) {
        let optionBox = document.createElement("option");
        console.log(t.productName);
        optionBox.text=t.productName;
        optionBox.value= t.productName;
        products.appendChild(optionBox);

    });

})
}

function refresh(){
    window.location.reload(true);
}

Answer 1

清除select元素，然后插入所有这些选项作为api调用的结果。我猜你不是只把新记录作为响应而是得到所有记录，因此删除所有选项然后插入所有记录。在代码的.then部分，写下这个。

.then((data) => {
    console.log(data)
if(data ==null || data.length ==0){
   refresh(); // Instead of refreshing the page
}
// clear the select element first 
products.innerHTML = "";

data.forEach(function (t) {
    let optionBox = document.createElement("option");
    console.log(t.productName);
    optionBox.text=t.productName;
    optionBox.value= t.productName;
    products.appendChild(optionBox);

});

}）

如果api返回null数组，则删除子元素

1 个答案: