Select2 initSelection 元素 Val答案

【问题标题】：Select2 initSelection element ValSelect2 initSelection 元素 Val
【发布时间】：2020-07-07 05:29:56
【问题描述】：

我在我的网络应用程序中使用了 select2 控件。在 initSelection 我将 element.val() 传递给控制器，但它为空。我将如何设置要传递给 Url.Action 的 element.val()。 element.val() 是我在使用 div 时应该使用的正确对象吗？

我在 Chrome 中看到了价值

调试器

查看

<div id="guideline-container" style="@(Model.Type == "Guideline" ? "display:block" : "display:none")">
    <form id="guideline-form" class="form-horizontal">
        <div class="form-group">
            <label for="guidelineName" class="col-sm-2 control-label">Guideline</label>
            <div class="col-sm-10">
                <div id="guidelineName">
                     @{ Html.RenderAction("Index", "GuidelinesPicklist", new { value = Model.GuidelineId, leaveOutAlgorithmItems = true, separateActiveItems = true }); }
                </div>
                <div class="guideline-not-selected field-validation-error" style="display: none;">
                    Guideline is required.
                </div>
            </div>
        </div>
        <div class="text-center">
            <button type="submit" class="btn btn-primary modal-submit-btn">Add</button>
            <button type="button" class="btn btn-default modal-close-btn" data-dismiss="modal">Close</button>
        </div>
    </form>
</div>

功能

 $(this).select2({
                placeholder: "@Model.Settings.Placeholder",
                //allowClear: true,
                ajax: {
                    url: "@Url.Action("GetPicklistItems")",
                    contentType: 'application/json; charset=utf-8',
                    type: 'POST',
                    dataType: 'json',
                    data: function (params) {
                        return JSON.stringify({
                            query: params.term,
                            args: @Html.Raw(JsonConvert.SerializeObject(@Model.Settings != null ? @Model.Settings.AdditionalArguments : null))
                        });
                    },
                    processResults: function (data, page) {
                        console.log("processResults");
                        console.log(data);
                        var resultData = [];

                        if (isError(data)) {
                            showErrorMessage(getErrorMessage(data));
                        } else {
                            hideErrorMessage();
                            mapResultData(data.Result, resultData, 0);
                        }

                        return {
                            results: resultData
                        };
                    }
                },
                templateResult: format,
                templateSelection: function(data) {
                    return data.text;
                },
                initSelection: function (element, callback) {
                    //console.log("initSelection");
                    //var id = $(element).val();
                    //console.log(id);
                    var guidelineId = "@Model.Value";
                    console.log("guidelineId");
                    console.log(guidelineId);
                    //console.log("params");
                    //console.log(params);
                    //console.log("element object Text");
                    //console.log(element.text);
                    debugger;
                    getAjax("@Url.Action("GetPicklistItem")" + "?value=" + guidelineId, function (result)
                    {
                        console.log("Ajax GetPicklistItem");
                        console.log(result);
                        debugger;
                        if (result.Result) {
                            var data = {};
                            $.extend(data, result.Result);
                            data.id = result.Result.Value;
                            data.text = result.Result.Text;
                            callback(data);
                            self.trigger("picklistChanged", data);
                        } else {
                            console.log(result);
                            debugger;
                            callback ({ id: null, text: "@Model.Settings.Placeholder" })
                        }
                    });
                },
                escapeMarkup: function(m) {
                    return m;
                }
            }).on('change', function () {
                var data = self.select2('data');
                self.trigger("picklistChanged", data);
            });

【问题讨论】：

Select2 initSelection 已弃用。你能分享更多信息，比如查看页面和JS以及你需要什么
@Ashiquzzaman 我在帖子中有观点
对不起。剃刀的一些例子？是否要在 Select2 下拉列表更改时调用 API/Action？
在编辑时模型充满了数据并填写了值
您能否将this 中的$(this).select2({ 存储到一个变量中，然后使用该引用获取initSelection 函数中的当前值？

标签： asp.net-mvc razor jquery-select2 ui-select2

【解决方案1】：

您可以使用以下方法获取Select2选定的值或文本：

var selectedValue = $('#Employee').val();

var selectedText = $('#Employee :selected').text();

或者，您可以简单地收听select2:select 事件以获取所选项目：

$("#Employee").on('select2:select', onSelect)

function onSelect(evt) {
    console.log($(this).val());
}

希望这会有所帮助...

【讨论】：