Question

我有这两个下拉菜单；通过使用Ajax，我向 servlet 发送了一个从数据库中获取一些数据的请求，然后需要将这些数据显示在这些下拉列表中。我正在获取这些数据：

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

事实是我的下拉列表没有以正确的方式显示数据。我期望的是，当用户单击下拉列表时-显示数据；但是发生的是，当我单击下拉列表时，数据被上传到了下拉列表中，但我只能选择第一个值。如果我尝试单击其他值，它将仅自动设置第一个，有时甚至不会自动设置。我还必须至少单击两次下拉菜单才能查看所有数据。我开车错了什么？也许我不应该使用

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

还有-如果我有不同的下拉菜单需要使用此Aajx方法（但只有在单击它们时才可以使用），是否有任何方法可以将其编写一次并在需要的地方调用它？我试图编写一个接受 select id作为参数的javascript函数，然后尝试将上面发布的Ajax方法粘贴为该函数的主体....不起作用！

P.s。如果我没有使用适当的语言，但是我刚刚开始使用Ajax，jQuery和JavaScript，我对此表示歉意。

Answer 1

我在这里看到一个问题：

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

数据ID缺少引号。试试这个：

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

我也强烈建议您在选项元素上使用value属性。

在不同的下拉菜单中通过Ajax在一个下拉菜单中上传数据

1 个答案: