Javascript 向多个select js添加多个选项时出现问题

我对JS还很陌生，我想给multiple select添加许多选项。但问题是，当我试图显示它们时，只有最后一条记录触发了函数（显示）。但当我在做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>

{{csrf_field（）}}
模型
*
Wybierz模型产品。。。
@foreach（$productModels作为$productModel）
{{$productModel->modelName}-{{$productModel->modelPrice}}@if（$productModel->modelPriceCurrency==1）PLN@else EUR@endif
@endforeach
国际劳工组织主席：
1.
2.
3.
4.
5.
Produkty powiązane：

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

函数addRelatedproducts（）{
var模型=[
,
];
var相关产品=[
,
];
var e=document.getElementById（“productModel”）；
var selectedModelId=e.options[e.selectedIndex].value；
var select=document.getElementById（“select”）；
对于（变量i=0；i

}

我真的不知道为什么它不起作用。有人能帮我解决这个问题吗

select.remove（relatedProducts[i].relatedProductName）

select.remove
需要一个选项索引作为参数。我假设当它收到一个产品名称字符串（可能不是一个数字）时，它显然会将其计算为，并在每个步骤上删除select中的第一个选项。因此，它最终会产生一个空的select

也许更好的方法是在迭代
relatedProducts
之前清除所有select选项，然后只填充所需的选项

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

while（选择.options.length）{
选择。删除（0）；
}
对于（变量i=0；i

select.remove（relatedProducts[i].relatedProductName）；

select.remove
需要一个选项索引作为参数。我想当它收到一个产品名称字符串（可能不是一个数字）时，它显然会将其计算为，并在每个步骤上删除select中的第一个选项。因此，它最后会得到一个空的select

也许更好的方法是在迭代
relatedProducts
之前清除所有select选项，然后只填充所需的选项

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

while（选择.options.length）{
选择。删除（0）；
}
对于（变量i=0；i