时间戳

首页 > 解决方案 > 向多个选择 js 添加许多选项时出现问题

javascript - 向多个选择 js 添加许多选项时出现问题

问题描述

我对 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";
    }
}

}

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

标签： javascriptarraysselectmultiple-select

解决方案

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

推荐阅读