我希望通过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/