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());

从动态选择中的多个选择中获取选择的值

3 个答案: