[英]Cannot get selected value of Select2 dropdownlist
I use Select2 Dropdown dropdownlist in my MVC project as shown below. 我在MVC项目中使用Select2 Dropdown下拉列表,如下所示。 Although I can pass the "query" parameter via AJAX by setting it directly, I cannot get the selected text or value of dropdownlist in the data section below. 尽管我可以通过直接设置AJAX来传递“ query”参数,但无法在下面的数据部分中获取所选文本或dropdownlist的值。 How to get it? 如何获得?
@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
});
You can simply listen to the select2:select
event to get the selected item. 您可以简单地侦听select2:select
事件以获取所选项目。
select2:select select2:选择
Triggered whenever a result is selected. 每当选择结果时触发。
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>
============================== SOLVED ============================== ============================已解决=================== ===========
Here is the solution of the problem: 这是问题的解决方案:
In order to send the text value in Select2 via AJAX use params.term in the data section as shown below. 为了通过AJAX在Select2中发送文本值,请在数据部分中使用params.term ,如下所示。 Many thanks to @DavidDomain as his answer also very useful in order to use selected index change. 非常感谢@DavidDomain作为回答,它对于使用选定的索引更改也非常有用。
//code omitted for brevity
data: function (params) {
return {
query: params.term, // search term
page: params.page
};
},
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.