单击时选择2(未选中），显示加载微调器javascript

Select2 upon click(not selected), show loading spinner javascript

本文关键字：加载 显示 javascript 选择 单击      更新时间：2023-09-26

好吧，我的代码很简单。我使用的是示例数据，但在我的真实代码中，单击select2下拉列表时，数据需要很长时间才能加载，并表示我希望包含一个加载微调器，该微调器在单击下拉列表时显示，并在数据加载完成后隐藏。到目前为止，我还不能把它做好。当select2被更改或选中时，它会起作用，但当单击它时，它不会起作用。任何建议

<div class="col-sm-3 loader">
          <%= select_tag 'clone-application-id', options_from_collection_for_select(@applications, :id, :case_code), prompt: "Please Select", class: "form-horizontal single-select" %>
        </div>
 <%= image_tag "ajax-loader.gif", id: "loading-indicator",  style: "display:none" %>

我的js文件

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

函数在选择"changed"时调用，但在"click"时不调用。这是意料之中的行为还是打字错误？也许将其更改为"点击"可以解决这种情况。

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

我有一个关于Ajax调用的select2下拉加载微调器的解决方案。。有了2个简单的功能，我们将在下拉中放置加载图标

添加引用（select2下拉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>

addLoadSpiner

此函数用于在下拉列表中添加或显示微调器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);               
        }
    }

hideLoadSpinner

添加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);                  
            }
        });
相关文章：