Получение данных для div на основе значения select с помощью ajax

В настоящее время я застрял с получением данных для div на той же странице на основе выбранного значения из выпадающего списка.

У меня есть выпадающий список, в котором пользователь может выбрать значение. На основе выбора должен быть заполнен div во второй части страницы. Я могу получить 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()

Я нашел другое решение для моей проблемы. Поскольку моя страница уже содержит всю необходимую информацию, я добавил цикл for для всех div, содержащих нужные мне данные, и скрыл их.

На следующем этапе я добавил несколько 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';
                });
            });

Тем не менее, спасибо за возможность обсуждать проблемы здесь!

Вернуться на верх