时间戳

首页 > 解决方案 > JQuery select 2 禁用 Jquery Ajax 调用

javascript - JQuery select 2 禁用 Jquery Ajax 调用

问题描述

我正在尝试使用 select2 JQuery 功能，该功能可以通过下拉菜单选项按文本搜索，同时使用 ajax 调用从后端检索检索到的下拉元素，如果我删除了 select2 它可能会工作，但它如果我添加选择两个，甚至不会触发点击功能。

这是我的代码

   var area = 0;       
        $("#area").on("click", function () {
            if (area == 0) {
                $.ajax({
                    type: "Get",
                    url: "/Filters/Areas",
                    datatype: "json",
                    traditional: true,
                    success: function (data) {
                        area = area + 1;
                        console.log(area);
                        for (var i = 0; i < data.length; i++) {
                            $("#area").append('<option class = "form-control" value=' + data[i].Value + '>' + data[i].Text + '</option>');
                        }
                    }
                });
            }
            });
        
  $(document).ready(function () {
            $("select").select2();   
        });

标签： javascriptjqueryajax

解决方案

您可以根据此文档收听所选事件 

$(document).ready(function() {
$('#area').select2();

$('#area').on('select2:select', function(e) {
  const _val = $(e.target).val();
  if (_val === "0") {
    $.ajax({
      type: "Get",
      url: "/Filters/Areas",
      datatype: "json",
      traditional: true,
      success: function(data) {
        area = area + 1;
        console.log(area);
        for (var i = 0; i < data.length; i++) {
          var newOption = new Option(data[i].text, data[i].value, false, false);
$('#area').append(newOption).trigger('change');
        }
      }
    });
  }
});
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<select id="area" name="area">
  <option value="">Test</option>
  <option value="1">testus</option>
</select>

推荐阅读