Select2 initSelection 元素 Val

Question

我在我的網絡應用程序上使用 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);
            });

Answer 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());
}

希望這可以幫助...