將多個選項添加到多個選擇js時出現問題

Question

我是JS的新手，我想為多個選擇添加許多選項。 但是問題是，當我嘗試顯示它們時，只有最后一條記錄才觸發該函數（顯示）。 但是，當我執行console.log時，它完美地顯示了每件事。

這是我的HTML：

<form class="cart" method="post" action="{{ route('cart.add') }}">
{{ csrf_field() }}
<div class="form-group">
    <label for="product_size" class="grey">Model</label>
    <span class="red">*</span>
    <select class="form-control" id="productModel" name="product" onchange=" addRelatedproducts();">
        <option value="">Wybierz model produktu...</option>
        @foreach($productModels as $productModel)
            <option value="{{$productModel->id}}">{{$productModel->modelName}} - {{$productModel->modelPrice}} @if($productModel->modelPriceCurrency === 1) PLN @else EUR @endif</option>
        @endforeach
    </select>
</div>
<div class="form-group">
    <label for="exampleSelect1">Ilość:</label>
    <select class="form-control" id="exampleSelect1" name="quantity">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</div>
<div>
    <div class="form-group" id="relatedProductsDiv" style="display: none;">
        <label for="exampleSelect1">Produkty powiązane:</label>
        <select id="select" multiple="multiple" class="relatedProducts" name="relatedProduct">

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

這是我的JS：

function addRelatedproducts(){
var model = [
<?php foreach($productModels as $productModel):?>
  <?=$productModel?>,
<?endforeach;?>
];

var relatedProducts = [
    <?php foreach($relatedProductArray as $relatedProduct): ?>
        <?=$relatedProduct ?>,
    <?endforeach; ?>
];

var e = document.getElementById("productModel");
var selectedModelId = e.options[e.selectedIndex].value;
var select = document.getElementById("select");


for (var i = 0; i < relatedProducts.length + 1; i++) {

    select.remove(relatedProducts[i].relatedProductName);

    if(parseInt(relatedProducts[i].model_id) === parseInt(selectedModelId)){
        console.log(relatedProducts[i])
        console.log(selectedModelId)

        document.getElementById("relatedProductsDiv").style.display = "";

        var option = document.createElement("option");
        option.value = relatedProducts[i].id;
        option.text = relatedProducts[i].relatedProductName;
        select.add(option);

    }
    else{
        document.getElementById("relatedProductsDiv").style.display = "none";
    }
}

}

我真的不知道為什么它不起作用。 有人可以幫我解決這個問題嗎？

Answer 1

select.remove(relatedProducts[i].relatedProductName);

select.remove需要選項索引作為參數。 而且我想當它收到產品名稱字符串（可能不是數字）時，顯然會將其評估為NaN並在每一步中僅刪除選擇中的第一個選項。 因此，最后它帶有一個空選擇。

也許更好的方法是在迭代relatedProducts之前清除所有選擇選項，然后僅填充所需的選項？

while(select.options.length) {
    select.remove(0);
}
for (var i = 0; i < relatedProducts.length + 1; i++) {

    if(parseInt(relatedProducts[i].model_id) === parseInt(selectedModelId)){
        console.log(relatedProducts[i])
// ....