时间戳

首页 > 解决方案 > 将值附加到多选时，jquery重复项目

php - 将值附加到多选时，jquery重复项目

问题描述

当我将值附加到多选时遇到问题，我正在处理 laravel 和 modal，因此我将能够在同一页面中添加和编辑，对于创建或添加，有 foreach 可以获取多选中的所有值，在编辑项目，我使用 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>");
            });

在此处输入图像描述

标签： phpjquery

解决方案

是因为您正在循环访问权限并使用附加，要解决它，如果您使用每个方法循环选项，您只需更改所选道具，如下所示：

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

推荐阅读