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

Вы можете удалить прослушиватель событий после добавления его с помощью 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>

Answer 2

Используйте событие фокуса и удалите его, как только вы сделаете вызов

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

juniorProjects.addEventListener('focus', fetchProjs);