Question

我希望通过AJAX的响应来更新选择输入中的选项。响应可能有所不同，旧选项应由新选项更新。

<select class="form-control" id="juniorProjects">
    <option></option>
</select>

但是，我希望仅在单击选择框而不是任何选项时才调用方法getProjects()。

var juniorProjects = document.getElementById('juniorProjects');
juniorProjects.addEventListener('click', function(){                
    getProjects("junior");
});

现在使用此代码，每当我单击任何选项时，它都会触发select click事件，并且AJAX响应会更新这些选项，并且默认情况下始终选择第一个。

function getProjects(type){
    $.ajax({
      url: "SOME_ENDPOINT_TO_GET_PROJECTS",
    }).then(function(data) {                           
        $("#juniorProjects").empty();
        var projectsList = data['result']['recentProjects'];
        for(i=0; i<projectsList.length; i++){
            $("#juniorProjects").append("<option value='" + projectsList[i]['projectId']+ "'>" + projectsList[i]['name'] + "</option>");
        }
    });
}

STRANGE OBSERVATION ：在Macbook Chrome浏览器上-选择输入，即使选择任何选项也不会触发点击。在Chromebook chrome浏览器上-选择输入时，即使选择任何选项也会触发点击

Answer 1

使用焦点事件并在通话后将其删除

var fetchProjs = function () {
  juniorProjects.removeEventListener('focus', fetchProjs);
  getProjects("junior");
}

juniorProjects.addEventListener('focus', fetchProjs);

Answer 2

您可以使用removeEventListener添加事件监听器后将其删除。

var juniorProjects = document.getElementById('juniorProjects');
juniorProjects.addEventListener('click', juniorProjectsClicked);

function juniorProjectsClicked(){
    getProjects("junior");
    console.log('in event. This should only print once');
    juniorProjects.removeEventListener('click', juniorProjectsClicked);
}

function getProjects(type){
    // using setTimeout to imitate an ajax request
    setTimeout(function() {
      $("#juniorProjects").append("<option>TEST</option>");
    }, 200);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" id="juniorProjects">
    <option></option>
</select>

选择输入时单击Ajax：从Ajax响应中填充选项

2 个答案: