Javascript jquery select2v4-在select元素上选择默认选项

我使用的是使用ajax方法将select2连接到

元素的地方。除了加载时无法默认选择的值外，所有操作都正常

报告说：

如果需要提供默认选择，只需为每个选择包含一个选项，该选项包含应显示的值和文本

在这段代码中，我希望默认值为“foo”：

标记：

<label class="input">
  <select aria-hidden="true" tabindex="-1" 
    class="form-control user-school-select select2-hidden-accessible" 
    name="user[school_id]" id="user_school_id">
    <option selected="selected" value="1">foo</option>
  </select>
  <span style="width: 372px;" dir="ltr" 
    class="select2 select2-container select2-container--default">
    <span class="selection">
      <span aria-labelledby="select2-user_school_id-container" 
        tabindex="0" class="select2-selection select2-selection--single" 
        role="combobox" aria-autocomplete="list" aria-haspopup="true" 
        aria-expanded="false">
          <span title="foo" id="select2-user_school_id-container" 
            class="select2-selection__rendered"></span>
          <span class="select2-selection__arrow" role="presentation">
            <b role="presentation"></b></span></span></span>
 <span class="dropdown-wrapper" aria-hidden="true"></span></span></span>
</label>

我还使用

initSelection

尝试了另一种不推荐的方法，但没有成功：

$(".user-school-select").select2({
    ajax: {
        url: "/schools",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    minimumInputLength: 2,
    templateResult: formatSchool,
    templateSelection: formatSchoolSelection,
    initSelection : function (element, callback) {
        var data = {"id":"1","text":'foo'};
        callback(data);
    }
});
$(".user-school-select").select2("data", {"id": 1, "text": "foo"});

$(".user-school-select").select2("val", "1");

我还尝试在后面添加这一行，但也无济于事：

$(".user-school-select").select2({
    ajax: {
        url: "/schools",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    minimumInputLength: 2,
    templateResult: formatSchool,
    templateSelection: formatSchoolSelection,
    initSelection : function (element, callback) {
        var data = {"id":"1","text":'foo'};
        callback(data);
    }
});
$(".user-school-select").select2("data", {"id": 1, "text": "foo"});

$(".user-school-select").select2("val", "1");

---

我已经看过了一些类似问题的答案，但它们不适用于我的场景。我想是因为我在使用。我读过的大多数其他答案都说，您或者需要将

initSelection

与

val

结合使用，但这些其他示例总是使用

元素，而不是

。我在最新的文档中确实注意到，

initSelection

被折旧了，应该使用的

current

方法，但我不知道如何将其应用于我的上述代码？

一旦设置了以下值，请尝试在

select2

上触发

change

：

$(".user-school-select").select2("val", "1").trigger('change');

---

答案不正确，但我必须应用一种变通方法-通过删除

templateSelection

方法，问题得以解决。但这不是一个好的解决方案，因为我想要templateSelection方法的好处。我暂时不用它

$(document).ready(function() {
  $(".user-school-select").select2({
    ajax: {
        url: "/schools",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; }, 
    minimumInputLength: 2,
    templateResult: formatSchool/*,
    templateSelection: formatSchoolSelection*/
  }); 
}); 

---

它对我不起作用，当我尝试你建议的方法时，它给了我错误：

TypeError:$（…）。select2（…）未定义

当我尝试此方法时，它没有错误，但没有修复：

$（“.user school select”）。select2（“val”，“1”）$（“.user school select”）.trigger（“change”）当然，它在rails应用程序中，我会用更多的信息更新我的问题我更新了我的代码以提供更多的上下文，我不知道我还能提供多少帮助？谢谢你的帮助@joshweir在您的代码中，您在哪里保留了我的答案中给出的行？我现在添加了它，该行代码在上面描述的注释中给出了错误。您可以在
格式学校选择中执行此操作：
函数（项）{return item.text | yourcustomcodehere；}
。所选值将作为包含
id
和
text
键的对象通过
templateSelect
。
$(document).ready(function() {
  $(".user-school-select").select2({
    ajax: {
        url: "/schools",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; }, 
    minimumInputLength: 2,
    templateResult: formatSchool/*,
    templateSelection: formatSchoolSelection*/
  }); 
});