如何通过jQuery在Select2中获得一个额外的参数值

How to get an extra parameter value in Select2 via jQuery?

本文关键字：一个 参数 jQuery 何通过 Select2      更新时间：2023-09-26

我绑定了一个额外的属性到Select2 ddl，并希望通过jQuery检索这个属性值(Key)，如下所示:

控制器: 

public ActionResult GetProjects()
{
    var projects = repository.Projects.Select(m => new ProjectViewModel
    {
        Id = m.Id,
        Name = m.Name,
        Key = m.Key //Extra parameter that I want to retrieve using jQuery                
    })
    return Json(projects, JsonRequestBehavior.AllowGet);
}

我成功地填充了ddl，并尝试获得除了Name和Id onChange之外的Key值，但不知道如何获得它:

视图:

<input type="hidden" id="key" name="Key" value=0 /> 
//I fill the ddl without no problem via Select2 and there is no need to post its code for brevity
@Html.DropDownListFor(m => m.ProjectId, Enumerable.Empty<SelectListItem>(), "Select")
$('#ProjectId').change(function (e) {
        projectId = $(this).val(); // I can get the selected ProjectId value
        debugger;
        //!!! But cannot get the Key value
        var key = $('#ProjectId').select2('data').Key;
}

任何想法?

下面是Select2的渲染HTML:

<select class="select2-hidden-accessible" data-val="true" data-val-number="The field Proje must be a number." data-val-required="Req" id="ProjectId" name="ProjectId" 
tabindex="-1" aria-hidden="true"><option value="">Select</option>
<option value="1">Project A</option></select>
<span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" 
aria-expanded="false" tabindex="0" aria-labelledby="select2-ProjectId-container"><span class="select2-selection__rendered" id="select2-ProjectId-container" 
title="Project A"><span class="select2-selection__clear">×</span>Project A</span><span class="select2-selection__arrow" role="presentation">
<b role="presentation"></b></span></span></span>

问题的解决方案如下:

<input type="hidden" id="projectPKey" name="ProjectPKey" value=0 /> 
@Html.DropDownListFor(m => m.ProjectId, Enumerable.Empty<SelectListItem>(), "Select" )
projectId.select2({
    //code removed for brevity
    processResults: function (data, page) {
    var newData = [];
    $.each(data, function (index, item) {
        newData.push({            
            id: item.Id, //id part present in data             
            text: item.Description, //string to be displayed
            key: item.Key //extra parameter(s)
        });
    });
});

var pkey = $('#ProjectId').find(':selected').data().data.key;
$('#projectPKey').val(pkey);
console.log(pkey);

我是这么做的:

从这里开始(对于像我这样的新手来说很有用):

与数据对象一起传入的其他参数将包含在Select2公开的数据对象。

这里它告诉如何检索当前选择，它作为对象数组返回:

$ (' # mySelect2 ') .select2(的数据);

那么对于这个问题的代码示例，您将像这样检索当前选择的'Key'值:

var key = ($('#ProjectId').select2('data')[0]).Key;
相关文章：