Question

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

下拉列表位于“模态”窗口中，我希望能够在关闭模态时重置表单。

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

var InvertedPeninsula = function() {
  this.inhabitants = [
    {
      name: 'Sir Charles',
      race: 'Human'
    },
    {
      name: 'Ealei',
      race: 'Elf'
    }
  ];
  // Adds an extra humans method property to the inhabitants array to return all Humans
  this.inhabitants.humans = function() { /* returns all Human inhabitants */ };
  Object.defineProperty(this.inhabitants, 'humans', {enumerable: false});
};

// Create a new invertedPeninsula
var invertedPeninsula = new InvertedPeninsula();

// Log the name of each invertedPeninsula inhabitant
for (var i in invertedPeninsula.inhabitants) {
  console.log(invertedPeninsula.inhabitants[i].name);
}

在这种情况下，所选值将为<select id="mylist"> <option value="4">A</option> <option value="2">B</option> <option value="1">C</option> <option value="3">D</option> </select>（值= 4）。

请注意，这些值是动态填充的，无法进行硬编码。

我的重置功能是：

Answer 1

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

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

这是最终奏效的内容：

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

Answer 2

使用＆＃34; show.bs.modal＆＃34;事件和jQuery中的.prop（）方法我们可以很容易地做到这一点。

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

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

});

每次打开模态时都会触发，因为我们正在使用＆＃34; show.bs.modal＆＃34;而不是＆＃34; shown.bs.modal＆＃34;你甚至不应该看到选择被改变了。

Answer 3

对于表单中的所有select2：

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

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

3 个答案: