javascript - 以动态形式更改时从多个选择中获取选定值

Question

我目前正在开发一个动态表单，该表单使用户能够添加任意数量的变体。这个可以添加的表格有价格、尺寸和颜色。大小和颜色是 select2 选择框，使用户能够选择多个内容。形式:

<div class="col-sm-4">
   <label>Kleuren</label>
   <select name="colors[{{$i}}][]" id='color-options' class="form-control multiple-select" multiple="multiple">
   @foreach($colors as $id=>$color)
      <option value="{{$id}}">{{$color}}</option>
   @endforeach
   </select>
</div>

在查看 HTML 代码时，我有多个按名称排列的表单:colors[0][]、colors[1][]、颜色[2][]等。

如何在新 div 中打印所选新颜色的值？到目前为止我拥有的代码:

    $(document).ready(function() {
        $('.multiple-select').select2({
            language: 'nl'
        });
        $('.summernote').summernote();

        var addVariantButton = document.getElementById('addVariant[0]');
        addVariantButton.addEventListener('click', function(){
            addVariant(0);
        });

        var colorSelected = document.getElementsByName('colors[0][]');
        colorSelected.addEventListener("click", displayColorSelected);
    });

    function displayColorSelected() {
        var selected_value = document.getElementById("color-options").value;
        console.log(selected_value);
    } 

但这仅适用于第一个颜色输入表单，但我如何才能将其变成一个更动态的函数来获取所有颜色输入？

Answer 1

您可以获取数组中所有选定的值，如下所示:

function displayColorSelected() {
    var selected_value = $("[id='color-options']").toArray().map(x => $(x).val());
    console.log(selected_value);
}

注意: id 选择器将始终返回单个元素，该元素将位于第一个具有该 id 的元素。因此，您仅在第一次选择时获得值(value)。

您可以使用attribute选择器([])来代替，它将找到具有给定id的每个元素。所以这里 $("[id='color-options']").toArray() 将找到 id 等于 color-options 的每个元素code> 和 map(x => $(x).val()) 将仅返回元素数组中的值部分。