根据 select 值和 ajax 获取 div 的数据

Question

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

我有一个下拉列表，用户可以在其中 select 一个值。下拉列表从 CourseOverview-Model 中获取数据。基于 selection，页面第二部分的 div 也应使用 CourseOverview-Model 中的数据进行填充。在我的代码中，console.log 显示我选择的值。但是我一直坚持获取与整个数据的连接，以便填写页面的第二部分。感谢您的帮助。

目标是在下一步中创建一个带有预填充 table 的 individual 记分卡。

我的 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
        })

Answer 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';
                });
            });

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

根据 select 值和 ajax 获取 div 的数据

Get data for div based on select value with ajax

javascript

django

ajax