在 Select2 事件中获取选中的选项,当可以选择多个选项时
Get selected option in Select2 event, when multiple options can be selected
如何在收听 select2:select
事件时获取刚刚 selected 的 <option>
?请注意,这在使用单个 select 时很简单,因为当只有一个选项被 selected 时,它必须是刚刚被 selected 的那个。我还希望能够在使用 multiple-select (<select multiple>
).
时找到刚刚 selected 的选项
在select2:unselect
活动中,未selected <option>
可以通过e.params.data.element
获得,但在select2:select
活动中则不然。我看不出 <option>
不可用的原因,因为它是在此时创建的。但是,对于 select2:selecting
事件,<option>
尚未创建,并且在触发事件时显然不可用。
我使用以下方法在 Select2 中选择了当前选项(适用于版本 4 及更高版本):
// single value
var test = $('#test');
test.on("select2:select", function(event) {
var value = $(event.currentTarget).find("option:selected").val();
console.log(value);
});
更新:多选值(有和没有最后选择)
// multi values, with last selected
var old_values = [];
var test = $("#test");
test.on("select2:select", function(event) {
var values = [];
// copy all option values from selected
$(event.currentTarget).find("option:selected").each(function(i, selected){
values[i] = $(selected).text();
});
// doing a diff of old_values gives the new values selected
var last = $(values).not(old_values).get();
// update old_values for future use
old_values = values;
// output values (all current values selected)
console.log("selected values: ", values);
// output last added value
console.log("last added: ", last);
});
$('#test').on('select2:select', function(e) {
var data = e.params.data;
console.log(data);
});
如何在收听 select2:select
事件时获取刚刚 selected 的 <option>
?请注意,这在使用单个 select 时很简单,因为当只有一个选项被 selected 时,它必须是刚刚被 selected 的那个。我还希望能够在使用 multiple-select (<select multiple>
).
在select2:unselect
活动中,未selected <option>
可以通过e.params.data.element
获得,但在select2:select
活动中则不然。我看不出 <option>
不可用的原因,因为它是在此时创建的。但是,对于 select2:selecting
事件,<option>
尚未创建,并且在触发事件时显然不可用。
我使用以下方法在 Select2 中选择了当前选项(适用于版本 4 及更高版本):
// single value
var test = $('#test');
test.on("select2:select", function(event) {
var value = $(event.currentTarget).find("option:selected").val();
console.log(value);
});
更新:多选值(有和没有最后选择)
// multi values, with last selected
var old_values = [];
var test = $("#test");
test.on("select2:select", function(event) {
var values = [];
// copy all option values from selected
$(event.currentTarget).find("option:selected").each(function(i, selected){
values[i] = $(selected).text();
});
// doing a diff of old_values gives the new values selected
var last = $(values).not(old_values).get();
// update old_values for future use
old_values = values;
// output values (all current values selected)
console.log("selected values: ", values);
// output last added value
console.log("last added: ", last);
});
$('#test').on('select2:select', function(e) {
var data = e.params.data;
console.log(data);
});