将值追加到多个select时jquery重复项

Question

当我将值附加到多个选择时，我会遇到一个问题，我正在处理laravel和模式，这样我就能够在同一个页面中添加和编辑，因为创建或添加会获取multiselect中的所有值，在编辑项上，我使用jquery追加选定的数据，但在这一点上，它选择了值，但如果我想选择更多的内容，则同时显示值，这样我就有了重复的项。

刀片：

      <select class="form-control select2" id="permission"  name="permission[]" multiple="multiple">
                  @foreach($permissions as $key => $value)
                       <option value="{{$key}}">{{$value}}</option>
                 @endforeach
      </select>

jquery:

  $(response.permissions).each(function (i,value) {
  $("#permission").append("<option value='"+value['id']+"' selected>"+value['name']+"</option>");
            });

​

​

Answer 1

是因为您正在循环遍历权限并使用附件，要解决这个问题，您只需更改所选的支柱，如果您使用以下每个方法循环这些选项：

$(response.permissions).each(function (i,value) {
     $(this).prop('selected', true);
});

如果您正在循环选中的标记，则需要在选择器中进行一些修改：

$(response.permissions).each(function (i,value) {
    $(`#permission option[value='${value}']`).prop('selected', true);
});

请选中这里的另一个示例，如果您使用的是select2，只需在“标签”框中添加tags=true即可使crud生效。

​

$(document).ready(function() {
    $('#permission').select2({
    tags: true});
});

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>

<body>
<div style="width: 100%">
  <select class="form-control select2" id="permission" name="permission[]" multiple="multiple">
    <option value="1">Hello Country</option>
    <option value="2">Hello World</option>
    <option value="3">Hello Stack Overflow</option>
  </select>
  </div>
</body>

</html>

​

Answer 2

我找到了答案

    var  selected_value = [];
    i = 0;
    $(response.permissions).each(function (i,value) {
        selected_value[i++] = value['id'];
     });

   $('#permission').select2().val(selected_value).trigger('change');
    },