显示了 Select2 值，但实际上是空的答案

【问题标题】：Select2 values are shown, but is actually empty显示了 Select2 值，但实际上是空的
【发布时间】：2020-03-07 10:45:24
【问题描述】：

<div class="form-group">
  <select class="form-control js-example-basic-multiple"
    name="regular[]" id="regular" multiple="multiple" required>
    <option value="History">History</option>
    <option value="Political Science">Political Science
    </option>
    <option value="Economics">Economics</option>
    <option value="Education">Education</option>
    <option value="Philosophy">Philosophy</option>
    <option value="Elective Assamese">Elective Assamese
    </option>
    <option value="Elective Hindi">Elective Hindi</option>
    <option value="Arabic">Arabic</option>
    <option value="Mathematics">Mathematics</option>
    <option value="Linguistics">Linguistics</option>
  </select>
</div>

这是我的 select2 输入。

$(document).ready(function () {
    $('#regular').select2({
        placeholder: 'Select any two from the options',
        maximumSelectionLength: 2,
    });
});

我在这里加载了 select2.js。我正在从 ajax 调用中获取数据。

options = data.regular.split(",");

这个option 有 3 个值，我想从数组中选择前两个。因此我的代码是..

option = [options[0],options[1]];
$("#regular").val(option).trigger('change');

现在选项显示在列表中。但是，如果我单击并从输入中选择，一切都会重置，我必须再次选择。如果不更改我要提交的任何内容，则该字段显示为必填。

【问题讨论】：

你的服务器数据是什么样子的
$("#regular").val([options[0],options[1]]).trigger('change'); 您可以在数组中给出逗号分隔的值。例如$("#regular").val([1,2]).trigger('change');

标签： jquery jquery-select2

【解决方案1】：

这里的代码有效，因为来自服务器的值与 Option 元素的两个值相同

所以也许你的问题是选项字符串不存在

，它也区分大小写，所以“arabic”！==“Arabic”arabic 不起作用

更改选项标签或更改 JSON 响应中的值字符串

希望这会有所帮助?

$(document).ready(function() {

  mySelect = $('#regular').select2({
    placeholder: 'Select any two from the options',
    maximumSelectionLength: 2
  });

  options = 'Economics,Arabic,Education'.split(',');
  option = [options[0],options[1]];

  //simulate ajax using timeout
  setTimeout(function() {
    mySelect.val(option).trigger("change");
  }, 1000);

});

<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.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<div class="form-group">
  <select class="form-control js-example-basic-multiple" name="regular[]" id="regular" multiple="multiple" required>
    <option value="History">History</option>
    <option value="Political Science">Political Science
    </option>
    <option value="Economics">Economics</option>
    <option value="Education">Education</option>
    <option value="Philosophy">Philosophy</option>
    <option value="Elective Assamese">Elective Assamese
    </option>
    <option value="Elective Hindi">Elective Hindi</option>
    <option value="Arabic">Arabic</option>
    <option value="Mathematics">Mathematics</option>
    <option value="Linguistics">Linguistics</option>
  </select>
</div>

【讨论】：

你拯救了我的一天。上帝保佑你:)