無法獲得Select2下拉列表的選定值

Question

我在我的MVC項目中使用Select2 Dropdown下拉列表，如下所示。儘管我可以直接通過AJAX傳遞「查詢」參數，但我無法在下面的數據部分中獲取所選文本或下拉列表的值。如何得到它？

@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中的文本值通過AJAX使用params.ter如下所示，在數據部分輸入m。非常感謝@DavidDomain，因爲他的回答對於使用選定的索引更改也非常有用。

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

Answer 2

您可以簡單地收聽select2:select事件以獲取選定的項目。

Events

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>