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

【问题标题】：select2 - How to change the value to the first option of the list with jQuery?select2 - 如何使用 jQuery 将值更改为列表的第一个选项？
【发布时间】：2015-08-28 15:16:16
【问题描述】：

我有一个带有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 */ );
}

【问题讨论】：

$('#mylist')[0].selectedIndex = 0; 可以解决问题
适用于普通<select>。不适用于select2。
select2 有自己的按值选择选项的方法。请参阅其文档中示例的“编程访问”部分。例如。 $("#mylist").select2("val", "A");
@mmccaff 您引用的方法已弃用。另外，我不想选择 A 或 value = 4。我想选择列表中的 first 值。这是不同的。

标签： javascript jquery jquery-select2

【解决方案1】：

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

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

这是最终奏效的方法：

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

【讨论】：

@downvoter ：你能解释一下你为什么投反对票吗？也许答案可以改进？！
酷又简单。谢谢
派如何“简单”？ ;-)
吃起来很容易:))

【解决方案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”，所以您甚至不应该看到选择被更改。

【讨论】：

【解决方案3】：

对于表单中的所有 select2：

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

【讨论】：

【解决方案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');

【讨论】：