Select2 & Bootstrap 模态问题设置选择选项

Question

我已经研究了很多关于这个问题的答案，但仍然无法解决。

我需要在选择元素中设置一个值，作为当用户单击每个表格行的“编辑记录”按钮时显示和选择的唯一选项。

该值在表格行中设置正确，但问题是当用户单击“编辑记录”按钮时。

这是按钮点击的JS脚本：

$(".edit-record").click(function () {
               //get data from table row
               var megaagent_rainmaker_id  = $(this).parent().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev().text();
      
               //assign to value for select element inside modal
               $("#megaagent_rainmaker_select").val(megaagent_rainmaker_id);
               //open modal
               $("#kt_modal_megaagent").modal();
           });
           
<div class="col-lg-12">     
   <div class="form-group validated">
       <label class="form-control-label is-invalid">{{ __('pages/administration/structure.labels.administration.megaagents.index.table.header.rainmaker') }}</label>
           <select class="form-control kt-select2" id="megaagent_rainmaker_select" name="param" multiple="multiple" style="width: 100%"></select>
   </div>
</div>

这是select2初始化的代码：

// Class definition
var rainmakerSelect = function () {
    // Private functions
    var demos = function () {
        // CSRF Token
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        // multi select
        $('#megaagent_rainmaker_select').select2({
            language: "es",
            placeholder: "Escriba y seleccione",
            allowClear: true,
            maximumSelectionLength: 1,
            ajax: {
                url: '/admin/megaagent/getrainmaker',
                type: "get",
                dataType: 'json',
                delay: 150,
                data: function (params) {
                  return {
                    _token: CSRF_TOKEN,
                    search: params.term // search term
                  };
                },
                processResults: function (response) {
                  return {
                    results: response
                  };
                },
                cache: true
              }
        });

    }

    // Public functions
    return {
        init: function () {
            demos();
        }
    };
}();

// Initialization

jQuery(document).ready(function () {
    rainmakerSelect.init();
});

这是模态 HTML 代码：

<!--begin::Modal-->
<div class="modal fade" id="kt_modal_megaagent" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                    {{ __('pages/administration/structure.labels.administration.megaagents.newmegaagent') }}
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <div class="modal-body">
                <form class="kt-form" id="megaagent-form">
                    @csrf
                    <div class="kt-portlet__body">
                        <div class="form-group row">
                            <div class="col-lg-12">     
                                <div class="form-group validated">
                                    <label class="form-control-label is-invalid">{{ __('pages/administration/structure.labels.administration.megaagents.index.table.header.rainmaker') }}</label>
                                        <select class="form-control kt-select2" id="megaagent_rainmaker_select" name="param" multiple="multiple" style="width: 100%"></select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="kt-portlet__foot">
                        <div class="kt-form__actions text-center">
                            <button type="submit" class="btn btn-primary btn-submit">{{ __('general.buttons.send') }}</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('general.buttons.close') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--end::Modal-->

问候

Answer 1

您正在更改 select 的值，但 select 需要知道该值已更改。为此，您只需致电.change()（或.trigger('change')，如果您愿意）。

这应该可以解决问题：

$("#megaagent_rainmaker_select").val(megaagent_rainmaker_id).change();

我还建议找到一种比

更好的方法来检索值

var megaagent_rainmaker_id  = $(this).parent().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev().text();

对您的 DOM 的任何更改都会导致它崩溃。您可能想查看data attributes 或选择最近的指定类或类似的东西。