javascript - 当多选的选定选项使用jQuery添加其他字段时

每次选择一个新选项时，如何在表单中创建另一个字段，并且该字段的每个名称随选项的值而变化，我尝试过，而我得到的只是多选的长度和值

<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>

最佳答案

我不知道此字段的每个名称随选项部分的值而变化。但是实际上，在这里，我尝试收听select2提供的change事件。然后使用jQuery使用:selected伪选择器找到选定的值，以找到选定的选项的值和文本。

希望你有一些想法！

$(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>