如何在jQuery中通过id动态分配Select2值答案

【问题标题】：How to assign Select2 value by dynamic by id in jQuery如何在jQuery中通过id动态分配Select2值
【发布时间】：2021-09-25 08:22:06
【问题描述】：

有一个包含这些值的 select2 下拉列表

{
  "id": 9050020,
  "text": "Selected Folders",
  "keyword": "S"
}, {
  "id": 9050021,
  "text": "All Folders",
  "keyword": "A"
}

当我收到 Select2 值的后端响应时，它会显示为“A”。那么如何将选择字段设置为“所有文件夹”？

这是选择填充：

<select data-width="100%" data-placeholder="Select an option" id="foldertype" name="foldertype">

【问题讨论】：

这个问题有点不清楚，你可能会要求更多，因为你的意思是。也许stackoverflow.com/q/25187926/367456 有帮助。
您需要提供更多详细信息，特别是关于如何将 keyword 值转换为 text 或如何“获取后端响应”（什么甚至是“select2 的后端响应”？）正如所提供的（假设是一个数组），select2 按预期返回带有 id 和 text 的数据：jsfiddle.net/w2uvo6zs
也许我误解了 - 您是否使用这些值加载您的 select2，然后想要选择与 A 匹配的那个？ select2 确实保留您传递给它的所有数据：jsfiddle.net/w2uvo6zs/1
但您似乎只能获取 selected 值的原始数据。因此，您可以保留在您自己的变量中提供的数据副本并对其进行搜索，或者遍历所有选择选项并将 select2 设置为在每个选项上都处于活动状态，获取其数据，检查，重复。最好保留一份副本。

标签： javascript jquery jquery-select2 html-select

【解决方案1】：

您可以通过按 ID 选择“所有文件夹”选项并触发 change 事件来设置它。

见："Selecting options"

var data = [{
  "id": 9050020,
  "text": "Selected Folders",
  "keyword": "S"
}, {
  "id": 9050021,
  "text": "All Folders",
  "keyword": "A"
}];

var $select = $('#foldertype').select2({ data: data }); // Convert

var found = data.find(function(entry) { return entry.keyword === 'A' });
if (found) {
  $select.val(found.id).trigger('change')
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<select data-width="100%" data-placeholder="Select an option" id="foldertype" name="foldertype">

这是一个使用 jQuery 插件的修改示例。请记住，这确实引用了外部数据源。它只是引用<option> 子元素。

(function($) {
  $.fn.setSelection = function(value, isText) {
    var oldVal = this.val();
    if (isText) {
      this.find('option').filter(function() {
        return $(this).text() === value.trim();
      }).prop('selected', true);
    } else {
      this.val(value);
    }
    if (this.val() !== oldVal) {
      this.trigger('change');
    }
    return this;
  }
})(jQuery);

const data = [
  { "id": 9050020 , "text": "Selected Folders" , "keyword": "S" },
  { "id": 9050021 , "text": "All Folders"      , "keyword": "A" }
];

$('#foldertype').select2({ data }).setSelection('All Folders', true);

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<select data-width="100%" data-placeholder="Select an option" id="foldertype" name="foldertype">

【讨论】：

或 var found = data.find(function(entry) { return entry.keyword === 'A' }); 以匹配 OPs 特定要求（作为 OPs 要求的一种可能解释）