Problem while adding many options to multiple select js

Question

I'm pretty new to JS, and I want to add many options to multiple select. But the problem is that when I'm trying to show them only the last record is triggering the function (showing). But when I'm doing console.log it is showing every thing perfectly.

This is my 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>

This is my 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";
    }
}

}

I don't really know why it isn't working. Can anybody help me with this problem?

Answer 1

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

select.remove expects an option index as an argument. And I suppose when it receives a product name string (probably not a number) apparently it evaluates it as NaN and just removes the very first option in the select on every step. So it comes up with an empty select in the end.

Maybe the better approach would be to clear all the select options right before iterating relatedProducts and then to populate only with the needed ones?

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