select2 - 如何使用 jQuery 将值更改为列表的第一个选项？

Question

我有一个带有 select2 下拉菜单的表单。

下拉菜单位于 "modal" window 中，我希望能够在模式关闭时重置我的表单。

想要的行为：打开模式时，我希望默认值成为我 select 中的第一个选项。

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

在这种情况下，selected 值将是 A（值 = 4）。

请注意，这些值是动态填充的，不能硬编码。

我的重置函数是：

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

Answer 1

通过使用 "show.bs.modal" 事件和 jQuery 中的 .prop() 方法，我们可以轻松做到这一点。

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

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

});

每次打开模式时都会触发，因为我们使用的是 "show.bs.modal" 而不是 "shown.bs.modal" 你甚至不应该看到选择被更改。

Answer 2

就在我发布问题后，我发现了一些与 select2('val', ...) 一起工作的东西，但它是 deprecated in 4.0 并将在 4.1 中删除。

我这边缺少的部分是触发 change 事件...正如我在已弃用的文档中看到的那样。我添加了它，事件触发了值更新！

这是最终起作用的方法：

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

Answer 3

对于表单中的所有 select2：

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

Answer 4

第 1 步： Select select(s) 的第一个选项 - 不仅适用于 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');

select2 - 如何使用 jQuery 将值更改为列表的第一个选项？

select2 - How to change the value to the first option of the list with jQuery?

javascript

jquery

jquery-select2