select2.js - 如何从数据属性中激活选择

Question

我有以下 html 代码：

 <div class='multiWrapper'>
     <select id="multi" class="js-dropdown-from-code">
         <optgroup class='def-cursor' label='Code' data-city='Description'>
             <option data-city="" data-id="0">Select unit...</option>
             <option data-city="New York" data-id="1">USA</option>
             <option data-city="London" data-id="2">UK</option>
         </optgroup>
     </select>
 </div>

其中 select 转换为具有两列的 Select2 下拉列表。

$('#multi').select2({
    width: '100%',
    formatResult: formatResultMulti,
    dropdownCssClass: 'bigdrop'
});

使用此功能。

function formatResultMulti(data) {
    var city = $(data.element).data('city');
    var classAttr = $(data.element).attr('class');
    var hasClass = typeof classAttr != 'undefined';
    classAttr = hasClass ? ' ' + classAttr : '';
    var $result = $(
        '<div class="row" style="font-size: 0.8125rem;">' +
        '<div class="col-md-6 col-xs-6' + classAttr + '">' + data.text + '</div>' +
        '<div class="col-md-6 col-xs-6' + classAttr + '">' + city + '</div>' +
        '</div>'
    );
    return $result;
}

所有这些都有效，我的问题是当我尝试加载具有特定值的 select2 以启动时。

通常我会使用 $('#multi).val('').trigger('change') 来设置值，但是因为我使用的是选项组，所以我不确定如何做同样的事情。

谁能拯救我的无知

更新：

我添加了缺少的 HTML 选项标签。如您所见，我没有使用值标记，而是使用了数据属性 data-id。

我发现使用以下作品

$("#multi option[data-id='30']").prop("selected", true).trigger('change');

但它没有设置基础值，所以在提交表单时，验证没有识别更改触发器。

Answer 1

尝试使用

$("#multi").val("").trigger('change.select2');

select2.js - 如何从数据属性中激活选择

select2.js - How to make selection active from data attribute

javascript

jquery

jquery-select2