select2 - \"trigger\" 不触发答案

【问题标题】：select2 - "trigger" does not fireselect2 - \"trigger\" 不触发
【发布时间】：2022-08-14 22:45:13
【问题描述】：

当我打开下拉菜单时，我通过 jQuery 设置的值是突出显示但没有得到触发/选择.单击突出显示的选项也不会执行任何操作，直到我单击另一个选项，然后单击正确的选项，即触发器触发时。

<select name=\"paySelect\" id=\"paySelect\" class=\"form-control select2-hidden-accessible\" data-select2-id=\"paySelect\" tabindex=\"-1\" aria-hidden=\"true\">
    <option value=\"\" data-select2-id=\"2\">Select Payment Mode</option>
    <option value=\"1\" data-select2-id=\"19\">Cash on Delivery</option>
    <option value=\"2\" data-select2-id=\"18\">Prepaid</option>
</select>

设置值： $(\"#paySelect\").val(\"2\").trigger(\'change\');

我还尝试了以下方法：

$(\"#paySelect\").val(\"1\").trigger(\'change.select2\');

$(\"#paySelect\").val(\"1\").change();

一件令人沮丧或相当有趣的事情是在 chrome 控制台中一切正常.我正在研究别人的代码。

ver: Select2 4.0.6-rc.1

 $(\"#paySelect\").select2({ width: \'100%\'});
 $(\"#paySelect\").val(\"2\").trigger(\'change\');

<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css\" integrity=\"sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" />
<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\" integrity=\"sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"></script>

<select name=\"paySelect\" id=\"paySelect\" class=\"form-control select2-hidden-accessible\" data-select2-id=\"paySelect\" tabindex=\"-1\" aria-hidden=\"true\">
    <option value=\"\" data-select2-id=\"2\">Select Payment Mode</option>
    <option value=\"1\" data-select2-id=\"19\">Cash on Delivery</option>
    <option value=\"2\" data-select2-id=\"18\">Prepaid</option>
</select>

按照这里的要求是代码

<div class=\"col-md-4 payment_mode_list\">
  <select name=\"paySelect\" id=\"paySelect\" class=\"form-control select2-hidden-accessible\" data-select2-id=\"paySelect\" tabindex=\"-1\" aria-hidden=\"true\">
    <option value=\"\" data-select2-id=\"8\">Select Payment Mode</option>
    <option value=\"1\" data-select2-id=\"83\">COD(Cash on Delivery)</option>
    <option value=\"2\" data-select2-id=\"84\">Prepaid</option>
  </select><span class=\"select2 select2-container select2-container--default select2-container--below select2-container--open select2-container--focus\" dir=\"ltr\" data-select2-id=\"7\" style=\"width: 100%;\"><span class=\"selection\"><span class=\"select2-selection select2-selection--single\" role=\"combobox\" aria-haspopup=\"true\" aria-expanded=\"true\" tabindex=\"0\" aria-labelledby=\"select2-payment_mode_id-container\" aria-owns=\"select2-payment_mode_id-results\"><span class=\"select2-selection__rendered\" id=\"select2-payment_mode_id-container\" role=\"textbox\" aria-readonly=\"true\" title=\"Select Payment Mode\">Select Payment Mode</span>
  <span
    class=\"select2-selection__arrow\" role=\"presentation\"><b role=\"presentation\"></b></span>
    </span>
    </span><span class=\"dropdown-wrapper\" aria-hidden=\"true\"></span></span>
    <div class=\"payment_mode_id_error error_msg\"></div>
</div>

以下代码可能是自动生成的，并且仅在 select2 下拉菜单打开时才有效

<span class=\"select2-container select2-container--default select2-container--open\" style=\"position: absolute; top: 1087.38px; left: 130px;\"><span class=\"select2-dropdown select2-dropdown--below\" dir=\"ltr\" style=\"width: 321px;\"><span class=\"select2-search select2-search--dropdown\"><input class=\"select2-search__field\" type=\"search\" tabindex=\"0\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"none\" spellcheck=\"false\" role=\"textbox\"></span>
<span
  class=\"select2-results\">
  <ul class=\"select2-results__options\" role=\"tree\" id=\"select2-payment_mode_id-results\" aria-expanded=\"true\" aria-hidden=\"false\">
    <li class=\"select2-results__option select2-results__option--highlighted\" role=\"treeitem\" aria-selected=\"true\" data-select2-id=\"85\">Select Payment Mode</li>
    <li class=\"select2-results__option\" id=\"select2-payment_mode_id-result-tva6-1\" role=\"treeitem\" aria-selected=\"false\" data-select2-id=\"select2-payment_mode_id-result-tva6-1\">COD(Cash on Delivery)</li>
    <li class=\"select2-results__option\" id=\"select2-payment_mode_id-result-kust-2\" role=\"treeitem\" aria-selected=\"false\" data-select2-id=\"select2-payment_mode_id-result-kust-2\">Prepaid</li>
  </ul>
  </span>
  </span>
  </span>

请忽略在提问时和现在分享的示例中 ID 或类名中的任何不匹配/拼写错误。

这里可能需要更多输入。尝试在问题中包含可以重现此问题的代码，以便我们在这里为您提供最佳帮助。
我对您的代码做了一个 sn-p（有效），请更新它以在此处重现您的问题。
代码 sn-p 有效！
@MarkSchultheiss 我已经包含了代码。希望这能缩小范围。
@Alaindeseine 是的，即使我的 jquery val 更改和触发器也可以在 chrome 的控制台中工作，但不能来自网站本身编写的代码。

标签： javascript jquery jquery-select2 jquery-select2-4

【解决方案1】：

正确的代码是，例如：

$('#paySelect').val('').trigger('change');

您还可以仅通知 select2 并指示命名空间：

$('#paySelect').val('').trigger('change.select2');

Select2 触发器文档：https://select2.org/programmatic-control/events#triggering-events

【讨论】：

您是指单引号和双引号还是我应该先将值设置为''？两种方式都行不通。
无论是单引号还是双引号。触发更改事件的正确方法。
这个答案似乎与问题中的代码实际上相同。
这个问题讲述了 3 种不同的语法，我只是确认好的一种。
@Alaindeseine 但正如我在问题中提到的那样，这些都不起作用。还有什么我想念的吗？为什么你的val('') 是空的？