javascript - 向多个选择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并且只是删除每一步选择中的第一个选项。所以最后会出现一个空的选择。

也许更好的方法是在迭代 latedProducts 之前清除所有选择选项，然后仅填充所需的选项？

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])
// ....