Question

我在select2插件中面临第二个多选项的问题，每次我需要根据用户输入的文本更改选项列表

我第一次在多选字段中输入文本，称为keyup事件，然后调用ajax函数绑定选项列表，这里一切正常

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

    var city = $("#add_city option:selected").text();
    var location = $(".select2-search__field").val();

    var url = 'https://maps.googleapis.com/maps/api/place/autocomplete/json?key=AIzaSyCNHGRJsM3uwGUm5gYLGsVrPNyRdeWgYDY&components=country:in&input='+ city +''+ location +'';
    var data ={"url":url};
    console.log(url);
    //return false;
     $.ajax({
    url: 'webservice.php',
    type: 'POST',
    dataType:'JSON',
    contentType: "application/json; charset=utf-8",
    data:JSON.stringify(data),
    success: function (response) {
        //alert(response);
        console.log(JSON.stringify(response));
        for(var i in response)
        {
            $("#add_area").append("<option value=\"" + response[i] + "\">" + response[i] + "</option>");
        }}
    ,error: function(xhr, status, error) {}});

但第二次当我尝试在字段键盘事件中输入文本时未被触发且无法在该字段上调用ajax

我已经看到文档中的解决方案我们需要刷新选项列表，当用户选择选项然后我执行以下行

$('#add_area').select2('destroy').empty().select2({data: [{id: 1, text: 'new text'}]});

以上行清除了选项，但未触发keyup事件。

请帮助我如何解决此问题。

Answer 1

试试这个：你正在刷新列表，因此创建新元素，因此以前绑定的keyup事件处理程序将无法工作替换下面的代码

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

带

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

在Select2插件中的第二个多选选项上不会触发Jquery键上事件

1 个答案: