当一个multiselect的选择选项添加另一个字段使用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

我没有得到这场的每个名称与部分的选项的值更改。但实际上，在这里，我尝试收听select2提供的change事件。然后使用: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>