从多个select中获得动态变化的选择值

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][]、colors[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的第一个元素。所以你只获得了第一选择的价值。

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

Answer 2

添加所有的选择类(例如“颜色-选择”)，并运行所有的选择-

$('.color-select').each(function() { console.log($(this).val()); })

Answer 3

您可能需要委托事件侦听器。

 document.addEventListener('event',function(e){
    if(element){//do something}
 })

由于您使用的是jquery，所以更容易。

$(document).on('event','element',function());