select2 - 如何使用 jQuery 將值更改為列表的第一個選項？

Question

我有一個帶有select2下拉列表的表單。

下拉菜單位於“模態”窗口中，我希望能夠在模態關閉時重置我的表單。

想要的行為：打開模態時，我希望默認值成為我選擇中的第一個選項。

<select id="mylist">
    <option value="4">A</option>
    <option value="2">B</option>
    <option value="1">C</option>
    <option value="3">D</option>
</select>

在這種情況下，所選值將是A （值 = 4）。

請注意，這些值是動態填充的，不能硬編碼。

我的重置功能是：

function reset() {
    $('#mylist').val( /* Code I'm looking for goes here */ );
}

Answer 1

在我發布問題之后，我發現了一些與select2('val', ...)一起使用的東西，但它在4.0中已棄用 ，將在4.1中刪除。

我最后的缺失部分是觸發change事件......正如我在棄用的文檔中看到的那樣。 我添加了它，事件觸發了值更新！

這是最終的工作：

$('#mylist').val($('#mylist option:first-child').val()).trigger('change');

Answer 2

通過在jQuery中使用“show.bs.modal”事件和.prop（）方法，我們可以輕松地完成此操作。

$("#my-modal").on("show.bs.modal", function() {

    $(this).find("select option:eq(0)").prop("selected", true);

});

這會在每次打開模態時觸發，因為我們使用“show.bs.modal”而不是“shown.bs.modal”，你甚至不應該看到選擇被更改。

Answer 3

對於表格中的所有select2：

$('#formId select').each( function( key, value ) {
  $(this).val($(this).find('option:first-child').val()).trigger('change');
});

Answer 4

第 1 步：選擇您選擇的第一個選項 - 不僅適用於 select2

$('#myForm').find('select').find('option:eq(0)').attr('selected','selected');

第 2 步：觸發 select2 更改

$('#myForm select').trigger('change.select2');

在您的具體情況下：

$('#mylist').find('option:eq(0)').attr('selected','selected');
$('#mylist select').trigger('change.select2');