如何在jQuery中通過id動態分配Select2值

Question

有一個帶有這些值的 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">

Answer 1

您可以通過按 ID 選擇它並觸發change事件來設置“所有文件夾”選項。

請參閱： “選擇選項”

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