select2 - 单击时未选择下拉选项

Question

我有这个 Razor 下拉菜单，它通过 ajax 从数据库中获取信息，但没有选择下拉菜单中显示的选项。如何使下拉选项在点击时被选中？

我尝试实现类似问题的答案，但没有奏效：

select2 load data using ajax cannot select any option

这是我目前所拥有的：

阿贾克斯

 $(document).ready(function () {
        $.validator.addMethod("regxPhone", function (value, element, regexpr) {
            return regexpr.test(value);
        }),
        $.validator.addMethod("regxEmail", function (value) {
            return /^([\w!.%+\-])+@@([\w\-])+(?:\.[\w\-]+)+$/.test(value);
        }),
        $.validator.addMethod('validEmail', function (value, element, param) {
            return valiEmailAjax($("#Email").val());
        });



        $('#dropdown-employees').select2({
            minimumInputLength: 0,
            multiple: false,
            dropdownParent: $('#dropdown-email-for-select2'),
            ajax: {
                url: "/en/BOEmployeeAjax/GetEmployeesExcept",
                type: "POST",
                dataType: "json",
                data: function (params) {
                    return {
                        emplId: 0,
                        t: params.term
                    }
                },
                processResults: function (data, params) {
                    return { results: data }
                }
            },

            placeholder: window.selectAnotherSupervisor,
            escapeMarkup: function (markup) { return markup; },
            
        });

剃刀下拉菜单

<div class="col-md-4 fieldSize4" id="dropdown-employees">
                @Html.DropDownListFor(x => x.Employee, new SelectList(new Dictionary<string, string>(), "Key", "Value"), @FXM.BO.Strings.T("ddl_select_option"), new { @class = "form-control select2-allow-clear", @placeholder = "Select Symbols" })
                <span class="help-block">
                    @FXM.BO.Strings.T("lbl_employee_description")
                </span>
            </div>

第一次更改后的代码：

@model FXM.BO.ViewModels.NewAffiliateViewModel

@{
    ViewBag.Title = "CreateAffiliate";
    Layout = "~/Views/Shared/_LoggedInLayout.cshtml";
}

<h2>Create Affiliate</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4 class="hidden">NewAffiliateViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.AffiliateName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.AffiliateName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.AffiliateName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group" id="dropdown-email-for-select2">
            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            </div>
        </div>

        @*<div class="form-group">
                @Html.LabelFor(model => model.Employee, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Employee, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Employee, "", new { @class = "text-danger" })
                </div>
            </div>*@

        @*<div class="form-group">
                @Html.LabelFor(model => model.MT4Group, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.MT4Group, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.MT4Group, "", new { @class = "text-danger" })
                </div>
            </div>*@

        <div class="form-group">
            <label class="control-label col-md-2">
                @FXM.BO.Strings.T("employeeName") <span class="required">
                    @***@
                </span>
            </label>

            @*<div class="col-md-4 fieldPositionCol4 select2-bootstrap-prepend">*@
            <div class="col-md-4 fieldSize4" id="dropdown-employees">
                @Html.DropDownListFor(x => x.Employee, new SelectList(new Dictionary<string, string>(), "Key", "Value"), @FXM.BO.Strings.T("ddl_select_option"), new { @class = "form-control select2-allow-clear", @placeholder = "Select Symbols" })
                <span class="help-block">
                    @FXM.BO.Strings.T("lbl_employee_description")
                </span>
            </div>
            @*<img id="tpLoader" src="~/Content/images/ajax-loader.gif" class="hidden" />*@
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">
                @FXM.BO.Strings.T("lbl_Bo_TradAcc_PlatformGroup") <span class="required">
                    @***@
                </span>
            </label>
            @*<div class="col-md-4 fieldPositionCol4 select2-bootstrap-prepend">*@
            <div class="col-md-4 fieldSize4">
                @Html.DropDownListFor(x => x.MT4Group, new SelectList(new Dictionary<string, string>(), "Key", "Value"), @FXM.BO.Strings.T("ddl_select_option2"), new { @class = "form-control select2-allow-clear", @placeholder = "Select Symbols" })
                <span class="help-block">
                    @FXM.BO.Strings.T("platform_group_description")
                </span>
            </div>
            <img id="tpLoader" src="~/Content/images/ajax-loader.gif" class="hidden" />
        </div>
        @*Create button*@
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="button" value="Create" class="btn btn-default" id="create-affiliate-button" />
            </div>
        </div>
    </div>
}

@*<div>
        @Html.ActionLink("Back to List", "Index")
    </div>*@


<script type="text/javascript" src="/Scripts/CustomScripts/Common/form-helpers.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    // document.ready function
    $(function () {
        refreshGroups();
        // selector has to be . for a class name and # for an ID
        $('#create-affiliate-button').click(function (e) {
            //e.preventDefault(); // prevent form from reloading page
            console.log("blahblahblah");
            //alert("hiii");

            var b = $("form").serialize();
            //var a = $("form").serializeArray();
            console.log("formvalues", b);

            $.ajax({
                url: "@Url.Action("CreateAffiliate", "AjaxUI")",
                type: "GET",
            dataType: "json",
            data: {
                newAffiliateViewModel : b
            },

                //error: function (jqXHR, exception) {
                //    failMessage();
                //}
            });
        });
    });

    function refreshGroups() {
        var pltf = "MT4_LIVE";
        var out = $('#MT4Group');
        if (pltf != null && pltf !== "") {
            $.ajax({
                url: '/' + window.currentLangCulture + '/BOLiveForms/GetPlatformGroupByFilter',
                data: {
                    platform: pltf, currency: "", withId : true
                },
                type: 'GET',
                beforeSend: function () {
                    $('#tpLoader').show();
                },
                complete: function () {
                    $('#tpLoader').hide();
                },
                success: function (data) {
                    populateDropDown(out, data);
                    //$('#recomandedGroup').show();
                }
            });
        } else {
            out.empty();
            out.append($('<option></option>').val('').html(window.defaultSelection));
        }
    }

    //GetEmployeesExcept - Method that populates the Dropdown for EmployeeName

    $(document).ready(function () {
        $.validator.addMethod("regxPhone", function (value, element, regexpr) {
            return regexpr.test(value);
        }),
        $.validator.addMethod("regxEmail", function (value) {
            return /^([\w!.%+\-])+@@([\w\-])+(?:\.[\w\-]+)+$/.test(value);
        }),
        $.validator.addMethod('validEmail', function (value, element, param) {
            return valiEmailAjax($("#Email").val());
        });
        var WithId = $('#dropdown-employees');
        if(WithId.length>0){
        
            var ajax_url = '/en/BOEmployeeAjax/GetEmployeesExcept';
            var $ajax = WithId;
            loadSelectData();
        }
    });

    function loadSelectData() {
        var cstoken = $('input[name="_token"]').val();
        $ajax.select2({
            ajax: {
                url: ajax_url,
                dataType: 'json',
            
                data: function (params, cstoken, page) {
                    return {
                        "_token": cstoken,
                        searchtxt: params.term, // search term
                        page: params.page
                    
                    };
                },
            
                processResults: function (data) {
                    var vh = [];
                    var obj = jQuery.parseJSON(data);
                
                    $.each(obj, function(key,value) {
                        var itemName = value.empname;
                        var itemId = value.id;
                        vh.push({id: itemId, text: itemName });
                    }); 
                    console.log(vh);
                    return {
                        results: vh,
                        pagination: {
                            more: true
                        }
                    }
                },

                placeholder: 'Search for a result',
                minimumInputLength: 1,
            }
        });
    }
</script>

Answer 1

请更改您的 select2 ajax 代码。

Please change your select2 ajax code like.
 $(document).ready(function () {
        $.validator.addMethod("regxPhone", function (value, element, regexpr) {
            return regexpr.test(value);
        }),
        $.validator.addMethod("regxEmail", function (value) {
            return /^([\w!.%+\-])+@@([\w\-])+(?:\.[\w\-]+)+$/.test(value);
        }),
        $.validator.addMethod('validEmail', function (value, element, param) {
            return valiEmailAjax($("#Email").val());
        });
        var WithId = $('#dropdown-employees');
        if(WithId.length>0){
        
            var ajax_url = '/en/BOEmployeeAjax/GetEmployeesExcept';
            var $ajax = WithId;
            loadSelectData();
        }
 });
    
    function loadSelectData() {
    var cstoken = $('input[name="_token"]').val();
     $ajax.select2({
        ajax: {
            url: ajax_url,
             dataType: 'json',
            
            data: function (params, cstoken, page) {
                return {
                    "_token": cstoken,
                    searchtxt: params.term, // search term
                    page: params.page
                    
                };
             },
            
            processResults: function (data) {
                var vh = [];
                var obj = jQuery.parseJSON(data);
                
                $.each(obj, function(key,value) {
                    var itemName = value.empname;
                    var itemId = value.id;
                    vh.push({id: itemId, text: itemName });
                }); 
                    console.log(vh);
                return {
                    results: vh,
                    pagination: {
                        more: true
                      }
                  }
            },
            placeholder: 'Search for a result',
            minimumInputLength: 1,
        }
    });
    }