Select2 initSelection 元素 Val

Posted 2023-05-07

【中文标题】Select2 initSelection 元素 Val

【英文标题】：Select2 initSelection element 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 函数中的当前值？

【参考方案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());

希望这会有所帮助...