マルチセレクションの選択されたオプションがjqueryを使用して別のフィールドを追加する場合

Question

新しいオプションを選択するたびにフォーム内に別のフィールドを作成し、このフィールドの各名前がオプションの値で変化し、マルチ選択

<select class="form-control select2 quality" multiple="multiple" name="quality[]" data-placeholder="Select a Quality" style="width: 100%;"> 
    @foreach($quality as $quali) 
     <option value="{{$quali->id}}">{{$quali->quality_name}}</option> 
    @endforeach 
</select> 

Answer 1

の値は、私はこのフィールドのそれぞれの名前は、オプション一部の値で変更されません。しかし、実際にはここでは、私はchangeイベントをselect2で聞くことを試みます。次に、選択した値を見つけるには、:selected疑似セレクタをjQueryで選択して、選択したオプションの値とテキストを探します。

あなたはいくつかのアイデアを得ることを願っています！

$(function() { 
 
    // Apply select2 
 
    $('.select2').select2() 
 
    
 
    // Just a small helper 
 
    var _h = { 
 
    capitalize: function (str) { 
 
     return str.charAt(0).toUpperCase() + str.slice(1) 
 
    }, 
 
    render: function (id, name) { 
 
     var html = '' 
 
     
 
     $.each([1, 2, 3], function (k, v) { 
 
     html += '<input type="text" name="quality[' + name + '][' + id + '][' + v + ']" placeholder="' + _h.capitalize(name) + '-' + v + '" class="block">' 
 
    }) 
 
     
 
     return html 
 
    } 
 
    } 
 
    
 
    // Now listed to change event of select2 
 
    $(document).on('change', '.quality', function() { 
 
    $('#append').html('') // truncate any appended nodes 
 
    
 
    $(this).find(':selected').each(function (k, v) { 
 
     $('#append').append(_h.render($(this).val(), $(this).text())) 
 
    }) 
 
    }) 
 
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<style> 
 
.block { 
 
    display: block; 
 
    margin: .5rem 0; 
 
    width: 100%; 
 
} 
 
</style> 
 

 
<select class="form-control select2 quality" multiple="multiple" name="quality[]" data-placeholder="Select a Quality" style="width: 100%;"> 
 
    <option value="1">Standard</option> 
 
    <option value="2">Outstanding</option> 
 
    <option value="3">Whatever</option> 
 
</select> 
 

 
<div id="append"></div>