使用ajax根据选择值获取div的数据

Posted 2023-02-18

【中文标题】使用ajax根据选择值获取div的数据

【英文标题】：Get data for div based on select value with ajax

【发布时间】：2022-01-21 13:20:54

【问题描述】：

我目前无法根据从下拉列表中选择的值在同一页面上获取 div 的数据。

我有一个下拉菜单，用户可以在其中选择一个值。下拉列表从 CourseOverview-Model 获取数据。根据选择，页面第二部分的 div 也应填充来自 CourseOverview-Model 的数据。在我的代码中，console.log 显示了我选择的值。但我坚持要获得与整个数据的连接，以便填写页面的第二部分。任何帮助表示赞赏。

我们的目标是在下一步中创建一个带有预填表的个人记分卡。

我的 html 看起来像这样：

<!--Dropdown-->
<div class="container">
        <select id="choosecourse">
            <option value="">Select course</option>
            % for course in courses % 
            <option> course.name </option>
            % endfor %
        </select>
</div>

<!--Second part of the page which should be filled in based on the selection-->
<div class="container">
        <h5> id.name </h5>
</div>
<div class="container">
        <table class="table input-width">
            <tr>
                <td>Holes:</td>
                <td> id.holes </td>
                <td>Par:</td>
                <td> id.par </td>
            </tr>
            <tr>
                <td>Your handicap:</td>
                <td> user.handicap </td>
                <td>Extra strokes:</td>
                <td><input type="number" min="0"></td>
            </tr>
    </table>
</div>

我的 javascript 看起来像这样：

<script>
        $(document).ready(function() 
            $('#choosecourse').change(function()
                var name = document.getElementById("choosecourse").value;
                console.log(name)
                );
            );
</script>

我的 views.py 看起来像这样：

def add_score(request):
        courses = CourseOverview.objects.all()
        return render(request, "mrc/add_score.html", 
            "courses": courses
        )

这些都是models.py中的必要模型：

class CourseOverview(models.Model):
    course_id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=64, unique=True)
    par = models.PositiveIntegerField()
    holes = models.PositiveIntegerField()


class Course(models.Model):
    course = models.ForeignKey("CourseOverview", on_delete=CASCADE, related_name="course")
    hole = models.PositiveIntegerField()
    holepar = models.PositiveIntegerField()
    holehcpi = models.PositiveIntegerField()

编辑 我尝试了以下示例：

<div class="container">
        <select id="choosecourse">
            <option value="">Select course</option>
            % for course in courses % 
            <option> course.name </option>
            % endfor %
        </select>
</div>

<!--Second part of the page which should be filled in based on the selection-->
<div class="container">
        <h5 id="name"></h5>
</div>
<div class="container">
        <table class="table input-width">
            <tr>
                <td>Holes:</td>
                <td id="holes"></td>
                <td>Par:</td>
                <td id="par"></td>
            </tr>
            <tr>
                <td>Your handicap:</td>
                <td> user.handicap </td>
                <td>Extra strokes:</td>
                <td><input type="number" min="0"></td>
            </tr>
    </table>
</div>

Javascript

$(document).ready(function() 
            $('#choosecourse').change(function()
                var name = document.getElementById("choosecourse").value;
                fetch("mrc/add_score.html", 
                    method: "PUT",
                headers:
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest', 
                ,
            )
            .then(response => 
                return response.json()
            )
            .then(data => 
                document.querySelector('#name').innerhtml = id.name
                document.querySelector('#holes').innerhtml = id.holes
                document.querySelector('#par').innerhtml = id.par
            )))

还有views.py：

def add_score(request):
    if request.method == "PUT":
        data = CourseOverview.objects.all()
        return JsonResponse(data)
    else:
        courses = CourseOverview.objects.all()
        return render(request, "mrc/add_score.html", 
            "courses": courses
        )

【问题讨论】：

您没有为<option> 元素提供value 属性。除此之外，请更详细地解释你卡在哪里。当您进行选择时，要填写此表的数据来自哪里？

我已经指定了我的帖子。即使选项元素没有 value 属性，我的代码的 console.log(name) 部分也会显示所选选项。所以这是有效的。数据来自我的 CourseOverview-Model（请参阅我的 views.py）。我还坚持从 CourseOverview-Model 获取正确的数据来填写表格。我尝试了不同的 ajax-get 和 put 解决方案，但没有任何效果。

向我们展示您的 ajax 尝试。 SO 不是免费的代码编写服务。应该很容易找到很多使用ajax的教程

我编辑了我的帖子并添加了我尝试过的东西之一。

【参考方案1】：

我为我的问题找到了另一种解决方案。由于我的页面已经包含了它需要的所有信息，我为所有包含我想要的数据的 div 添加了一个 for 循环并隐藏它们。

在下一步中，我添加了一些 javascript 来显示在下拉列表中选择的 div 并隐藏其他的。

这里是对应的代码。希望这可以帮助遇到类似问题的人。

HTML

<div class="container">
        <select id="choosecourse">
            <option value="">Select course</option>
            % for course in courses % 
            <option> course.name </option>
            % endfor %
        </select>
</div>

<!--Second part of the page which should be filled in based on the selection-->
<div class="container">
        <h5 id="name"></h5>
</div>
<div class="container">
        % for course in courses %
        <div style="display: none;" class="hidethem" data-name=" course.name ">
            <div><h5 id=> course.name </h5></div>
            <div><table class="table input-width">
                <tr>
                    <td>Holes:</td><td> course.holes </td>
                    <td>Par:</td><td> course.par </td>
                </tr>
                <tr>
                    <td>Your handicap:</td><td> user.handicap </td>
                    <td>Extra strokes:</td><td><input type="number" min="0"></td>
                </tr>
            </table></div>
        </div>
        % endfor %
</div>

我的 javascript 看起来像这样：

$(document).ready(function() 
            $('#choosecourse').change(function()
                let name = document.getElementById("choosecourse").value;
                console.log(name);
                $(".hidethem").hide();
                document.querySelector("[data-name=" + CSS.escape(name) + "]").style.display = 'block';
                );
            );

不过感谢有机会在这里讨论问题！