无法获取 Select2 下拉列表的选定值答案

【问题标题】：Cannot get selected value of Select2 dropdownlist无法获取 Select2 下拉列表的选定值
【发布时间】：2016-09-26 07:02:17
【问题描述】：

我在我的 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
});

【问题讨论】：

标签： javascript asp.net-mvc jquery-select2 select2 jquery-select2-4

【解决方案1】：

你可以简单的监听select2:select事件来获取选中的项目。

Events

select2:select

在选择结果时触发。

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>

【讨论】：

非常感谢您的完美回答。我只是错过了一些东西，无法在 AJAX 的 data 部分中获得选定的值。我怎么能在里面抓住它？
我创建了一个变量 var selectedText = "";然后在函数onSelect(evt){}中设置selectedText = $(this).val();，然后尝试把这个值赋给query: selectedText中数据部分，但不能设置查询参数。有什么想法吗？
所以你想将输入文本作为参数传递给ajax调用？
在ajax 部分中为url 参数使用函数，例如url: function (params) { return '/some/url/' + params.term; }。这应该这样做。查询参数将通过 params 选项传入。
对不起，大卫，但即使使用它，我也没有设法传递选定的文本值。我想我无法正确使用您上次评论中的功能。你能在你的代码sn-p上试试吗？我只想设置或传递所选记录的文本值:(非常感谢您的帮助...投票+

【解决方案2】：

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

这里是问题的解决方案：

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

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

【讨论】：