select2 - 过滤 ajax 源时无法更改所选选项

Question

我在 bootstrap 4 模式中使用 select2 库，如下所示：

<div class="form-group" id="fg-jbInd">
 <label for="jbIndustry" class="control-label">Industry *
  <select type="text" id="jbIndustry" class="form-control" name="jbIndustry">
  </select>
 </label>
</div>

Javascript 看起来像这样：

$('#jbIndustry').select2({
    placeholder: 'Please select one or more industries or leave blank',

    minimumInputLength : 2,
    dropdownParent: $('#fg-jbInd'),
    ajax: {
    url : '/getindustry',
    dataType : 'json'
    }
});

ajax 调用以这种格式返回数据：

{results : [{id : 1, test: 'option 1'},
            {id : 2, text: 'option 2'}
            ]

选择一个选项并填充该字段有效。 问题是当我想 select 另一个选项时。 当我开始输入时，我可以看到我想要的选项但是。 我可以 select 它，但该字段未填充，原始选择在该字段中。 如果我不限制数据库搜索，我可以 select 另一个选项填充该字段。 我注意到数据需要包含原始选择，否则它对我不起作用。

因此，如果数据包含已选择的选项，如下所示：

{results : [{id : 1, test: 'option 1'},
            {id : 2, text: 'option 2', selected : true}
            ]

我可以 select 其他选项之一。 如果所选选项不是数据的一部分，它将不起作用。 我想知道是否有人有同样的问题。 谢谢！！

Answer 1

这些问题与我如何为每个选项创建索引有关。 对于每个 ajax 调用，我使用返回的 mongodb 数组中的数组索引。 这将为同一项目创建一个新索引，有时还会创建一个不同的索引。

r.forEach(function(ind, i){
    result.push({'id' : i, 'text' : ind.indName});
});

对我有用的解决方案是使用由 mongodb 创建的 object id。 此 id 是唯一的，如果返回相同的项目，则不会更改。

r.forEach(function(ind, i){
    result.push({'id' : ind._id, 'text' : ind.indName});
});

希望这会对某人有所帮助！