У меня есть два выпадающих списка;используя Ajax, я отправляю своему сервлету запрос на получение данных из моей базы данных, а затем мне нужно отобразить эти данные в этих выпадающих списках.Я получаю эти данные, как это:
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<header>
</header>
<section>
<div id="body-wrapper">
<div class="borderedCourseOperations">
<!-- DELETE COURSE -->
<h2 id="deleteCourseH2">Delete a course I</h2>
<div>
<select id="coursesOptions" class="custom-select my-1 mr-sm-2">
<option value="" disabled selected>Select a course</option>
<option>2</option>
<option>3</option>
</select>
<button id="deleteCourseBtn" type="submit" class="search-btn">Delete</button>
</div>
</div>
<!-- END OF COURSES PANEL -->
<div class="borderedCourseOperations">
<!-- DELETE COURSE -->
<h2 id="deleteCourseH2">Delete a course II</h2>
<div>
<select id="coursesOptionsTwo" class="custom-select my-1 mr-sm-2">
<option value="" disabled selected>Select a course</option>
<option>2</option>
<option>3</option>
</select>
<button id="deleteCourseBtnTwo" type="submit" class="search-btn">Delete</button>
</div>
</div>
</div>
</section>
</body>
</html>
$("#coursesOptions").click(function () {
$.ajax({
type: 'GET',
cache: false,
url: 'ServletController',
data: {
action: "show_courses",
option: "association"
},
success: function (data) {
courses = JSON.parse(data);
var option;
$("#coursesOptions").empty();
for (var i in courses) {
option = '<option data-id = ' + courses[i].id + '>' + courses[i].courseName + '</option>';
$("#coursesOptions").append(option);
}
}
});
});
Дело в том, что мой выпадающий список отображает данные неправильно.Я ожидаю, что когда пользователь нажимает на выпадающий список - данные отображаются;но происходит следующее: когда я нажимаю на раскрывающийся список, данные загружаются в раскрывающийся список, но я могу выбрать только первое значение.Если я пытаюсь нажать на другие значения, он автоматически устанавливает только первое или иногда даже первое.Я также должен щелкнуть по крайней мере 2 раза в раскрывающемся списке, чтобы увидеть все данные.Что я делаю не так?Может быть, я не должен использовать
$(#).click(function () {});
А также - Если у меня есть другие выпадающие списки, которые должны использовать этот метод Aajx (но только при нажатии), есть ли способ написать его один раз и вызвать егогде это нужно?Я попытался написать функцию javascript, которая получает идентификатор select в качестве аргумента, а затем я попытался вставить в качестве тела функции метод Ajax, который я разместил выше .... не сработал!
Ps Я прошу прощения, если я не использую соответствующий язык, но я только начал использовать Ajax, jQuery и JavaScript.