[英]How do I change selected value of select2 dropdown with JqGrid?
我正在使用Oleg的select2演示 ,但我想知道是否可以在下拉菜单中更改当前选择的值。
例如,如果加载的四个值是: "Any", "Fruit", "Vegetable", "Meat"
以及默认为"Any"
的下拉列表,我怎样才能将其更改为JqGrid中的"Fruit"
事件loadComplete
?
这可能吗?
对于select2版本> = 4.0.0
其他解决方案可能不起作用,但以下示例应该有效。
$('select').val('1').trigger('change');
$('select').val('1').trigger('change.select2');
有关这些的示例,请参阅此jsfiddle 。 感谢@minlare for Solution 2。
说我有一个最好的朋友选择与人的名字。 所以Bob,Bill和John(在这个例子中我假设Value与名称相同)。 首先,我在select上初始化select2:
$('#my-best-friend').select2();
现在我在浏览器中手动选择Bob。 接下来Bob做了一些顽皮的事,我不再喜欢他了。 所以系统为我取消选择Bob:
$('#my-best-friend').val('').trigger('change');
或者说我让系统选择列表中的下一个而不是Bob:
// I have assume you can write code to select the next guy in the list
$('#my-best-friend').val('Bill').trigger('change');
选择2网站的注释(请参阅弃用和删除的方法 )可能对其他人有用:
.select2('val') “val”方法已被弃用,将在Select2 4.1中删除。 不推荐使用的方法不再包含triggerChange参数。
您应该直接在底层元素上调用.val。 如果需要第二个参数(triggerChange),还应该在元素上调用.trigger(“change”)。
$('select').val('1').trigger('change'); // instead of $('select').select2('val', '1');
查看select2文档 ,使用下面的内容来获取/设置值。
$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value
@PanPipes指出,这已经改变了4.x(下面给他一个upvote)。 val
现在直接调用
$("#select").val("CA");
因此,在jqGrid的loadComplete
中,您可以获得所需的任何值,然后设置selectbox值。
来自文档的通知
请注意,为了使用此方法,您必须在选项中定义initSelection函数,以便Select2知道如何将您在val()中传递的对象的id转换为需要呈现选择的完整对象。 如果要附加到选择元素,则已为您提供此功能。
this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });
这应该是有帮助的。
这应该更容易。
$("#e1").select2("val", ["View" ,"Modify"]);
但请确保您传递的值已经存在于HTMl中
只想添加第二个答案。 如果您已将select作为select2渲染 ,则需要在选择器中反映出如下:
$("#s2id_originalSelectId").select2("val", "value to select");
如果要添加新value='newValue'
和text='newLabel'
,则应添加以下代码:
向<select>
添加新选项:
var opt = "<option value='newValue' selected ='selected'>" + newLabel+ " </option>"; $(selLocationID).html(opt);
触发<select>
更改为所选值:
$(selLocationID).val('newValue').trigger("change");
您有两个选择 - @PanPipes应答状态您可以执行以下操作。
$(element).val(val).trigger('change');
只有当没有任何与更改事件绑定的自定义操作时,这才是可接受的解决方案。 我在这种情况下使用的解决方案是触发select2特定事件,该事件更新select2显示的选择。
$(element).val(val).trigger('change.select2');
设置在select2中选择的String选项时遇到一些麻烦:
使用选项:“option string1 / option”:
$('#select').val("string1").change();
但是带有值的选项:选项值“E”string1 / option:
$('#select').val("E").change(); // you must enter the Value instead of the string
希望这可以帮助有人在同一个问题上挣扎。
如果要选择单个值,则使用$('#select').val(1).change()
如果你想选择多个值然后在数组中设置值,那么你可以使用这个代码$('#select').val([1,2,3]).change()
对于V4 Select2,如果要更改select2的值和下拉列表的文本表示。
var intValueOfFruit = 1;
var selectOption = new Option("Fruit", intValueOfFruit, true, true);
$('#select').append(selectOption).trigger('change');
这不仅会设置幕后的值,还会设置select2的文本显示。
来自https://select2.github.io/announcements-4.0.html#removed-methods
我的预期代码:
$('#my-select').val('').change();
非常感谢@PanPipes的有用之处。
做这个
$('select#id').val(selectYear).select2();
如果你有ajax数据源请参考这个免费的bug
https://select2.org/programmatic-control/add-select-clear-items
//设置Select2控件
$('#mySelect2').select2({
ajax: {
url: '/api/students'
}
});
//获取预选项,然后添加到控件中
var studentSelect = $('#mySelect2');
$.ajax({
type: 'GET',
url: '/api/students/s/' + studentId
}).then(function (data) {
// create the option and append to Select2
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');
// manually trigger the `select2:select` event
studentSelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});
如果你想知道从下拉列表中的文本而不知道值的选定项目,这里是一个例子:
假设您想出了一个时区并想要设置它,但值中包含time_zone_id
。
var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
var $select2 = $('#time-zone');
var selected = $select2.find("option:contains('"+timeZone+"')").val();
$select2.val(selected).trigger('change.select2');
// Set up the Select2 control
$('#mySelect2').select2({
ajax: {
url: '/api/students'
}
});
// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
type: 'GET',
url: '/api/students/s/' + studentId
}).then(function (data) {
// create the option and append to Select2
var option = new Option(data.full_name, data.id, true, true);
studentSelect.append(option).trigger('change');
// manually trigger the `select2:select` event
studentSelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});
字体: 选择2个文档
你可以简单地使用get / set方法来设置值
$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value
或者你可以这样做:
$('#select').val("E").change(); // you must enter the Value instead of the string
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.