選擇輸入時單擊Ajax：從Ajax響應中填充選項

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>");
        }
    });
}

奇怪的觀察 ：在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>