asp.net-mvcrazorjquery-select2ui-select2

Select2 initSelection element Val


I am using the select2 control on my web aplciation. In the initSelection I am passing the element.val() to a controller but it is null. How would I set element.val() that i want pass to the Url.Action. Is element.val() the correct object that I should be using when I am using a div?

I see the value in Chrome enter image description here

debugger

enter image description here

view

<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>

function

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

Solution

  • You can get Select2 selected value or text by using the following approaches:

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

    Alternatively you can simply listen to the select2:select event to get the selected item:

    $("#Employee").on('select2:select', onSelect)
    
    function onSelect(evt) {
        console.log($(this).val());
    }