手动添加 select 选项并不是每次都能正常工作，即使成功了，第二次尝试总是失败

Question

我想创建一个包含三个 text_fields 的模式，提交时，我需要在浏览器上防止默认（不重新加载页面，以防任何数据放在模式旁边），然后发送数据通过 AJAX 到后端，然后使用提交的选项手动更新 select_2。

更改变量类型，将 .trigger("change") 拆分为新行，或在附加选项对象后将其归零，似乎没有任何改变。

<div class="sampling-register">
  <div class="ibox">
    <div class="ibox-content">
      <form>
        <div class="section">
          <div>
            <%= select_tag :client, grouped_options_for_select(@clients),
                           :include_blank => 'Wybierz klienta', class: 'select2_demo_2', required: true %>
            <button type="button" data-toggle="modal" data-target="#client_modal">
              <%= image_tag 'laboratory/add_circle_blue' %>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

<div class="modal inmodal" id="client_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content animated fadeIn">
        <div class="modal-header">Dodaj klienta</div>
        <%= form_for :client, url: clients_path, :html => {:id => "form_add_client"} do |f| %>
          <div class="modal-body">
            <%= f.hidden_field :laboratory_id, value: current_user.company.laboratory.id %>
            <%= f.text_field :name, class: 'form-control', placeholder: 'Nazwa', required: true %>
            <%= f.text_field :address, class: 'form-control', placeholder: 'Adres' %>
          </div>
          <div class="modal-footer">
            <button class="discard" data-dismiss="modal">Anuluj</button>
            <button class="submit">Dodaj</button>
          </div>
        <% end %>
      </div>
    </div>
  </div>

<script>
    let form = $("#form_add_client");
    let submitBtn = form.find(".submit");
    let client_select_tag = $("#client");

    form.on("submit", function (event) {
        event.preventDefault();
        let name = $('#client_name').val();
        let client_address = $('#client_address').val();
        let laboratory_id = $('#client_laboratory_id').val();

        $.ajax({
            url: '/clients',
            method: 'POST',
            dataType: "json",
            data: {
                client: {
                    name: name,
                    address: client_address,
                    laboratory_id: laboratory_id
                },
            }
        })
            .done(function (result) {
                if (result.error) {
                    toastr["error"](result.error);
                } else {
                    let option = new Option(result.data.name, "{lab_client_id: " + result.data.id + "}", false, true);
                    client_select_tag.children().eq(2).append(option).trigger('change');
                    $('#client_modal').modal('hide');
                    toastr["success"]("Klient dodany poprawnie");
                }
            })
    })
</script>

问题是，它确实有效，但有时却无效（比如每三次尝试一次），即使一次有效，在我重新加载页面之前，其他所有尝试都是失败的。重新加载后，似乎又像扔硬币一样。它确实每次都会触发附加选项 selected，但实际上附加到 select 列表并不经常发生。

Answer 1

好的，似乎要改变

client_select_tag.children().eq(2).append(option).trigger('change');

进入

client_select_tag.select2().children().eq(2).append(option).trigger('change');

使代码有效

手动添加 select 选项并不是每次都能正常工作，即使成功了，第二次尝试总是失败

Manually adding select options does not work correctly every time, and even if it did, the second atempt is always a failure

javascript

ajax

jquery

jquery-select2