无法获得Select2下拉列表的选定值

Question

我在MVC项目中使用Select2 Dropdown下拉列表，如下所示。 尽管我可以通过直接设置AJAX来传递“ query”参数，但无法在下面的数据部分中获取所选文本或dropdownlist的值。 如何获得？

@Html.DropDownListFor(x => x.StudentId, Enumerable.Empty<SelectListItem>(), 
    new { style ="width: 100%;" } )

$("#StudentId").select2({
   multiple: false,
   placeholder: "Select",
   allowClear: true,
   tags: true,

   ajax: {
       url: '/Grade/StudentLookup',
       dataType: 'json',
       delay: 250,

       data: function (params) {
           return {
               //q: params.Name, // search term
               //page: params.page
               query : 'test' //this parameter can be passed via AJAX
               //!!! but I cannot get the selected text or value of dropdownlist 
           };
       },              

       processResults: function (data, page) {
           var newData = [];
           $.each(data, function (index, item) {
               newData.push({
                   id: item.Id,     //id part present in data 
                   text: item.Name  //string to be displayed
               });
           });
           return { results: newData };
       },
       cache: true
   },
   escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
   minimumInputLength: 0, //for listing all, set : 0
   maximumInputLength: 20, // only allow terms up to 20 characters long
});

Answer 1

您可以简单地侦听select2:select事件以获取所选项目。

大事记

select2：选择

每当选择结果时触发。

 var select2 = $(".select2"); select2.select2({ multiple: false, placeholder: "Select", allowClear: true, tags: true, width: "180" }); function onSelect(evt) { console.log($(this).val()); } select2.on('select2:select', onSelect) 

 @import url('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <select class="select2"> <option value="item-1">Item 1</option> <option value="item-2">Item 2</option> <option value="item-3">Item 3</option> <option value="item-4">Item 4</option> <option value="item-5">Item 5</option> <option value="item-6">Item 6</option> <option value="item-7">Item 7</option> <option value="item-8">Item 8</option> <option value="item-9">Item 9</option> <option value="item-10">Item 10</option> </select> 

Answer 2

============================已解决=================== ===========

这是问题的解决方案：

为了通过AJAX在Select2中发送文本值，请在数据部分中使用params.term ，如下所示。 非常感谢@DavidDomain作为回答，它对于使用选定的索引更改也非常有用。

//code omitted for brevity
data: function (params) {
   return {
             query: params.term, // search term
             page: params.page
           };
   }, 
...