Question

我正在尝试使用AJAX调用更新Select2输入字段的选项，但链接到输入字段的onkeyup函数不会运行。

*请注意，当我将选择框的多个属性设置为multiple="multiple"时，onkeyup函数会运行，但是当我尝试通过删除属性获取单个结果（如选择框）时没有任何反应

我的HTML看起来像这样：

<select class="js-example-templating" style="width: 50%">
</select>

我的jQuery看起来像这样：

ar all_options = [
    ['Alaskan/Hawaiian Time Zone', [['AK','Alaska'], ['HI','Hawaii']]],
    ['Pacific Time Zone', [['CA','California'], ['NV','Nevada'], ['OR','Oregon'], ['WA','Washington']]],
    ['Mountain Time Zone', [['CAAZ','Arizona'], ['CO','Colorado'], ['ID','Idaho'], ['MT','Montana'], ['NE','Nebraska'], ['NM','New Mexico'], ['ND','North Dakota'], ['UT','Utah'], ['WY','Wyoming']]]
];

function formatState(state) {
    if (!state.id) {
        return state.text;
    }
    var $state = $('<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>');
    return $state;
};

$(".js-example-templating").select2({
    minimumInputLength: 1,
    templateResult : formatState
});

$('.select2-search__field').on('keyup', function (e) {


    tmp_html = '';
    //do ajax call here

    $(all_options).each(function(i) {
        var group = all_options[i][0];
        var options = all_options[i][1];

        tmp_html += '<optgroup label="'+group+'">';

        console.log(options);

        $(options).each(function(i) {
            var option_id = options[i][0];
            var option_text = options[i][1];

            tmp_html += '<option value="'+option_id+'">'+option_text+'</option>';
        });

        tmp_html += '</optgroup>';  
    }); 

    //now add the new options to the select box

    $('.js-example-templating').html(tmp_html);
});

尚未添加AJAX函数，此时onkeyup函数只是添加了所有选项，只要我能够运行onkeyup函数，就会添加它。

在此之后，所有选择框应该具有以下选项：

  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>

提前完成

修改

当Select2初始化开始时，输入字段会自动添加。输入字段的代码如下所示：

<input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox">

这是正在发生的事情的小提琴： https://jsfiddle.net/Reckless/hz2vqzt7/

当您添加multiple="multiple"属性并再次运行时，它将更新可用选项，但如果没有，则不会触发onkeyup事件

Answer 1

我认为问题是由于在初始化select2时动态地将.select2-search__field输入添加到页面，并且它没有挂钩到您编写的onkeyup函数的事件处理程序。

我改变了你的功能定义：

$('.select2-search__field').on('keyup', function (e) {

到

$(document).on('keyup', '.select2-search__field', function (e) {

它似乎工作正常，没有设置multiple属性。

在此处查看改动后的小提琴：Updated Fiddle

jQuery Select2 onkeyup未触发

修改

1 个答案: