手动添加select选项并不是每次都能正常工作,即使这样做了,第二次尝试也总是失败的

我想创建一个具有三个text_fields的模式,当提交时,我需要在浏览器上preventDefault (不重新加载页面,以防任何数据被放在模式旁边),然后通过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>

问题是,它确实可以工作,但有时不会(就像每三次尝试一次),即使它工作一次,那么在我重新加载页面之前,其他每一次尝试都是失败的。重新装填后,看起来又像掷硬币一样。它确实会在每次选择时触发附加选项,但实际上附加到选择列表的情况并不经常发生。

转载请注明出处:http://www.hbbinz.com/article/20230526/2140213.html