我希望通过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浏览器上-选择输入时,即使选择任何选项,点击均会触发

最佳答案

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

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

juniorProjects.addEventListener('focus', fetchProjs);

关于javascript - 选择输入时单击Ajax:从Ajax响应中填充选项,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52062410/

10-12 00:41
查看更多