I have this two dropdowns; by using Ajax I send to my servlet a request to get some data from my database and then I need to display those datas into those dropdowns. I'm getting those data like this:

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

The fact is that my dropdown doesn't display datas in the right way. What I expect is that when user click on the dropdown - data are shown; but what happens is that when I click on dropdown, data are uploaded into the dropdown but I can only pick the first value. If I try to click on other values it auto-sets only the first one or sometimes not even the first one. I also have to click at least 2 times on the dropdown to be able to see all the datas. What am I droing wrong? Maybe I shouldn't use

$(#).click(function () {}); 

And also - If I have different dropdowns that needs to use this Aajx method (but only when they are clicked), is there any way to write it once and call it where is necessary? I've tried to write a javascript function which receive the select id as argument and then I tried to paste as body of the function the Ajax method I posted above .... didn't work!

P.s. I apologize if I don't use an appropriate language but I have just started using Ajax, jQuery and JavaScript.

1 Answers

1
Community On

I see a problem here:

option = '<option data-id = ' + courses[i].id + '>' + courses[i].courseName + '</option>';

data-id is missing quotes. Try this:

option = '<option data-id = "' + courses[i].id + '">' + courses[i].courseName + '</option>';

Also i strongly recommend you, to use the value attribute on option elements.