这个函数在选择“changed”时被调用，而不是在“click”时被调用。这是预期的行为还是只是一个打字错误？也许将它改为“click”可以解决这种情况。

$('#clone-application-id').select2().on('click', function() {
  console.log("ok now what");
  $('#loading-indicator').show();
});

我有一个关于select2下拉菜单加载微调器的解决方案，用于** AJAX **调用。通过2个简单的函数，我们将在下拉菜单中放置加载图标

添加引用（选择2个下拉CDN）

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

HTML

div class="row">
<div class="col-md-4">
    <select class="js-example-basic-single" name="state" id="country">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
        <option value="ZB">Zimbamwe</option>
        <option value="TR">Türkiye</option>
    </select>

</div>
<div class="col-md-4">
    <select class="js-example-basic-single" name="state" id="city"></select>        
</div>
<div class="col-md-4">
    <select class="js-example-basic-single" name="state" id="district"></select>
</div>

添加加载Spiner

此函数用于在下拉列表中添加或显示微调器gif。加载微调器动态创建为html元素并添加到下拉列表中。如果之前已经添加，则只显示在屏幕上。

function addLoadSpiner(el) {
        debugger;
        if (el.length > 0) {
            if ($("#img_" + el[0].id).length > 0) {
                $("#img_" + el[0].id).css('display', 'block');
            }               
            else {
                var img = $('<img class="ddloading">');
                img.attr('id', "img_" + el[0].id);
                img.attr('src', 'http://www.lettersmarket.com/uploads/lettersmarket/blog/loaders/common_gray/ajax_loader_gray_512.gif');
                img.css({ 'display': 'block', 'width': '25px', 'height': '25px', 'z-index': '100', 'float': 'right' });
                img.prependTo(el[0].nextElementSibling);
            }
            el.prop("disabled", true);               
        }
    }

隐藏加载微调器

添加css css('display', 'none')从屏幕中删除

function hideLoadSpinner(el) {
        if (el.length > 0) {
            if ($("#img_" + el[0].id).length > 0) {
                 setTimeout(function () {
                     $("#img_" + el[0].id).css('display', 'none');
                     el.prop("disabled", false);
                }, 500);                    
            }
        }
    }

使用 AJAX 加载数据

最后，Loading微调器会出现在显示屏上，直到 AJAX 完成

$.ajax({
            url: "/Home/GetCities",
            data: JSON.stringify({
                                  'countryId': $("#country option:selected").val()
                                }),
            type: 'POST',
            cache: false,
            contentType: 'application/json; charset=utf-8',
            dataType: "json",
            success: function (result) {
                var dbSelect = $('#city');

                addLoadSpiner(dbSelect);     

                dbSelect.empty();
                $.each(result, function (index, item) {
                    dbSelect.append("<option value='" + item.id + "'>" + item.text + "</option>")
                });

                hideLoadSpinner(dbSelect);

            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError);                  
            }
        });