javascript - 如何在使用选项组或索引的select2中选择选项

我有一个使用这样的选项组的select2：

<optgroup label="Line Number">
    <option data-order="asc">Orderline</option>
    <option data-order="desc">Orderline</option>
</optgroup>
<optgroup label="Order Date">
    <option data-order="asc">Order Date</option>
    <option data-order="desc">Order Date</option>
</optgroup>
<optgroup label="Ship Date">
    <option data-order="asc">Ship Date</option>
    <option data-order="desc">Ship Date</option>
</optgroup>

我想以编程方式选择第二个选项OrderLine desc。

Select2文档显示了如何基于val（）进行选择，但是我不知道如何在此处应用它。

$('#sortby').val('???').trigger('change.select2');

我不能真正改变select2的结构，因为它在其他项目中使用过。

我想触发更改事件，因为在处理程序中发生了很多处理。

如果我可以根据索引进行选择，那也很好。

谢谢

最佳答案

<select id="sortby">
   <optgroup label="Line Number">
       <option data-order="asc">Orderline</option>
       <option data-order="desc">Orderline</option>
   </optgroup>
   <optgroup label="Order Date">
       <option data-order="asc">Order Date</option>
       <option data-order="desc">Order Date</option>
   </optgroup>
   <optgroup label="Ship Date">
       <option data-order="asc">Ship Date</option>
       <option data-order="desc">Ship Date</option>
   </optgroup>
</select>

//////////////Select ntn option of select element///////////////

var selectElement=$("#sortby");
function select_ntn_Option(index) {
   $('#sortby option[selected="selected"]').removeAttr('selected');
   selectElement.val(null);
   $('#sortby option:eq('+index+')').attr('selected','selected');
   selectElement.trigger('change');
}
select_ntn_Option(5);

//////////////Select ntn option by group title///////////////

var selectElement=$("#sortby");
function select_ntn_Option_ByGroupTitle(groupTitle,index) {
    $('#sortby option[selected="selected"]').removeAttr('selected');
    selectElement.val(null);
    $('#sortby>optgroup[label="'+groupTitle+'"]>option:nth-child('+index+')').attr('selected','selected');
    selectElement.trigger('change');
}
select_ntn_Option_ByGroupTitle('Ship Date',2);

//////////////Select last option by text value/////////////////

var selectElement=$("#sortby");
function selectLastOptionByTextValue(value) {
    $('#sortby option[selected="selected"]').removeAttr('selected');
    selectElement.val(null);
    $('#sortby option').filter(function () { return $(this).html() == value; }).last().attr('selected','selected');
    selectElement.trigger('change');
 }
selectLastOptionByTextValue('Order Date');

//////////////Select last option by group title/////////////////

var selectElement=$("#sortby");
function selectLastOptionByGroupTitle(value) {
    $('#sortby option[selected="selected"]').removeAttr('selected');
    selectElement.val(null);
    $('#sortby>optgroup[label="'+value+'"] option').last().attr('selected','selected');
    selectElement.trigger('change');
}
selectLastOptionByGroupTitle('Ship Date');

关于javascript - 如何在使用选项组或索引的select2中选择选项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57875427/