添加、选择或清除项目

在下拉菜单中创建新选项

可以通过创建新的Javascript以编程方式将新选项添加​​到Select2控件中Option对象并将其附加到控件:

var data = {
    id: 1,
    text: 'Barn owl'
};

var newOption = new Option(data.text, data.id, false, false);
$('#mySelect2').append(newOption).trigger('change');

第三个参数 new Option(...)确定该项目是否为“默认选中”;即它设置selected新选项的属性。第四个参数设置选项的实际选定状态-如果设置为true,则默认情况下将选择新选项。

如果不存在则创建

您可以.find用来选择该选项(如果已存在),否则可以创建它:

// 设置该值,必要时创建一个新选项
if ($('#mySelect2').find("option[value='" + data.id + "']").length) {
    $('#mySelect2').val(data.id).trigger('change');
} else { 
    // 创建一个DOM选项并在默认情况下预先选择
    var newOption = new Option(data.text, data.id, true, true);
    // 将其附加到select
    $('#mySelect2').append(newOption).trigger('change');
} 

选择选项

要以编程方式为Select2控件选择一个选项/项目,请使用jQuery .val() 方法:

$('#mySelect2').val('1'); // 选择值为“1”的选项
$('#mySelect2').trigger('change'); // 通知任何JS组件该值已更改

您还可以传递一个数组以 val 进行多个选择:

$('#mySelect2').val(['1', '2']);
$('#mySelect2').trigger('change'); // 通知任何JS组件该值已更改

Select2将收听 change 的事件 <select> 附加到的元素。当您进行需要在Select2中反映的任何外部更改(例如更改值)时,应触发此事件。

在远程来源(AJAX)Select2中预选选项

对于从AJAX 源接收数据的Select2控件,使用.val()不管用。该选项尚不存在,因为在打开控件和/或用户开始搜索之前,不会触发AJAX请求。服务器端过滤和分页使情况更加复杂-无法保证何时将特定项目实际加载到Select2控件中!

因此,解决此问题的最佳方法是简单地将预选项目添加为新选项。对于远程数据,这可能涉及在服务器端应用程序中创建一个新的API端点,该端点可以检索单个项目:

// 设置Select2控件
$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// 获取预选项,并添加到控件中
var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // 创建选项并附加到Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // 手动触发“select2:select”事件
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

N请注意,我们手动触发了select2:select 事件并传递整个 data 对象。这允许其他处理程序 访问所选项目的其他属性。

清除选择

您可以通过将控件的值设置为来清除Select2控件中的所有当前选择 null:

$('#mySelect2').val(null).trigger('change');