Подгрузка полей в форму по выбору значения из выпадающего списка

@wool · Регистрация: 09.09.2015

Студворк — интернет-сервис помощи студентам

Добрый день.

Нужно подгружать значения полей по выбору из выпадающего списка. Я знаю, что сюда каким-то боком нужно прикрутить javascript, но вообще не представляю каким образом это сделать. Мне бы гайд какой, где всё описывается на примере. В гугле нашёл несколько вариантов на тостере и стековерфлоу, но там оно либо не работает, либо не совсем то что надо. Возможно это можно сделать только с помощью django. Помогите пожалуйста.

Форма:

Кликните здесь для просмотра всего текста

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <div class="content-section">
        <form method="POST">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class ="border-bottom mb-4">
                    Запись о твёрдом грузе
                </legend>
                <label  class="col-form-label requiredField">
                    Выбор из справочника*
                </label>
                <select class="select form-control mb-4">
                    {% for material in dictionary %}
                        <option>{{ material.name }}</option>
                    {% endfor %}
                </select>
 
 
                {{ form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">ОК</button>
            </div>
        </form>
    </div>
{% endblock content %}

models.py

Кликните здесь для просмотра всего текста

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
from django.db import models
from django.urls import reverse
 
CATEGORIES_CHOOICE = (
    ('Класс 1', 'Класс 1'),
    ('Класс 2', 'Класс 2'),
    ('Класс 3', 'Класс 3'),
    ('Класс 4', 'Класс 4'),
    ('Класс 5', 'Класс 5'),
    ('Класс 6', 'Класс 6'),
    ('Класс 7', 'Класс 7'),
    ('Класс 8', 'Класс 8'),
    ('Класс 9', 'Класс 9'),
)
 
class Material(models.Model):
    name = models.CharField(max_length = 50
                            , verbose_name = ('Наименование'))
    shortDesc = models.CharField(max_length = 150
                                 , verbose_name = ('Краткое описание'))
 
    def __str__(self):
        return self.name + ', ' + self.shortDesc
 
class DangerousMaterial(Material):
    category = models.CharField(max_length = 10,
                                choices = CATEGORIES_CHOOICE,
                                default = 'Класс 1',
                                verbose_name = ('Класс опасности'))
 
    def __str__(self):
        return super().__str__() + ', ' + self.category
 
class HardDM(DangerousMaterial):
    weight = models.FloatField(max_length = 5
                               , verbose_name = ('Масса'))
 
    def __str__(self):
        return super().__str__() + ', ' + self.weight
 
    def get_absolute_url(self):
        return reverse('materials-main-harddm')

views.py

Кликните здесь для просмотра всего текста

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
from django.shortcuts import render
from django.contrib.auth.mixins import (
    LoginRequiredMixin,
    UserPassesTestMixin
)
from django.views.generic import (
    ListView,
    DetailView,
    CreateView,
    UpdateView,
    DeleteView
)
from .models import (
    HardDM,
)
from dictionary.models import DangerousMaterial
 
class HardDMListView(ListView):
    model = HardDM
    #<app>/<model>_<typeView>.html
    template_name = 'materials/main-harddm.html'
    context_object_name = 'materials'
    ordering = ['id']
    paginate_by = 5
 
class HardDMCreateView(LoginRequiredMixin, CreateView):
    model = HardDM
    fields = ['name', 'shortDesc', 'category', 'weight']
 
    def get_context_data(self, **kwargs):
        context = super(HardDMCreateView, self).get_context_data(**kwargs)
 
        context['dictionary'] = DangerousMaterial.objects.all()
 
        return context
 
class HardDMUpdateView(LoginRequiredMixin, UserPassesTestMixin, UpdateView):
    model = HardDM
    fields = ['name', 'shortDesc', 'category', 'weight']
 
    def test_func(self):
        if self.request.user.is_staff is True:
            return True
        return False
 
    def get_context_data(self, **kwargs):
        context = super(HardDMUpdateView, self).get_context_data(**kwargs)
 
        context['dictionary'] = DangerousMaterial.objects.all()
 
        return context
 
class HardDMDeleteView(LoginRequiredMixin, UserPassesTestMixin, DeleteView):
    model = HardDM
    success_url = '/materials/main-harddm/'
 
    def test_func(self):
        if self.request.user.is_staff is True:
            return True
        return False

dictionary.models

Кликните здесь для просмотра всего текста

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
from django.db import models
from django.urls import reverse
 
CATEGORIES_CHOOICE = (
    ('Класс 1', 'Класс 1'), #Взрывчатые материалы
    ('Класс 2', 'Класс 2'), #Газы сжатые, сжиженные и растворенные под давлением
    ('Класс 3', 'Класс 3'), #Легковоспламеняющиеся жидкости
    ('Класс 4', 'Класс 4'), #Легковоспламеняющиеся твердые грузы и вещества
    ('Класс 5', 'Класс 5'), #Окисляющие вещества и органические пероксиды
    ('Класс 6', 'Класс 6'), #Ядовитые вещества и инфекционные грузы
    ('Класс 7', 'Класс 7'), #Радиоактивные материалы
    ('Класс 8', 'Класс 8'), #Едкие и/или коррозионные грузы и вещества
    ('Класс 9', 'Класс 9'), #Прочие опасные грузы и вещества
)
 
class Dictionary(models.Model):
    name = models.CharField(max_length = 50
                            , unique = True
                            , verbose_name = ('Наименование'))
    shortDesc = models.CharField(max_length = 150
                                 , verbose_name = ('Краткое описание'))
 
    def __str__(self):
        return self.name + ', ' + self.shortDesc
 
class DangerousMaterial(Dictionary):
    category = models.CharField(max_length = 10,
                                choices = CATEGORIES_CHOOICE,
                                default = 'Класс 1',
                                verbose_name = ('Класс опасности'))
 
    def __str__(self):
        return super().__str__() + ', ' + self.category
 
    def get_absolute_url(self):
        return reverse('dictionary-main')

@wool · 15.04.2019, 16:52 **[ТС]**

Вот json'ы для двух справочников.

@m0nte-cr1st0 · 15.04.2019, 17:14

wool, тут сложно в двух словах описать.
Если я верно понял, то вам нужно в зависимости от выбранного значения в селекте подгружать соответствующие данные?
Да, тут нужен JS тогда и два возможных варианта:

1. Загружать все данные - для всех селектов. Но написать скрипт, в котором будет обрабатываться выбранное значение и в зависимости от него выбирать нужные данные.
2. При клике на пункт - отправлять аякс запрос в Джанго, там обрабатывать данные и в ответ отправлять нужные данные в шаблон.

@wool · 15.04.2019, 17:21 **[ТС]**

Сообщение от m0nte-cr1st0

Если я верно понял, то вам нужно в зависимости от выбранного значения в селекте подгружать соответствующие данные?

Да, всё верно.

Сообщение от m0nte-cr1st0

Да, тут нужен JS тогда и два возможных варианта:

В том то и проблема. Как это должно работать в теории я знаю. Мне нужен именно код на JS,
потому что прочитать код на JS я могу, а вот написать с нуля нет. Может кто-нибудь расщедриться и накидает мне пример с одним-двумя полями как это должно работать. Либо знает ссылку на гайд, где это описывается.
Вопрос в скорости работы вообще не стоит. Это тестовый проект. Мне надо, чтобы оно просто работало. Не важно каким-образом.

@m0nte-cr1st0 · 15.04.2019, 21:11

wool, выгрузи все данные в этот шаблон. и покажи отрендеренный хтмл шаблон (не Django+HTML) со всеми селектами и данными.

@wool · 16.04.2019, 11:40 **[ТС]**

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
 
     <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
    <link rel="stylesheet" type="text/css" href="/static/blog/main.css">
 
    
        <title>Главная</title>
    
</head>
<body>
    <header class="site-header">
      <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
        <div class="container">
          <a class="navbar-brand mr-4" href="/">Главная</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarToggle">
            <div class="navbar-nav mr-auto">
              <a class="nav-item nav-link" href="/dictionary/">Справочник</a>
              <div class="dropdown open">
                  <a class="nav-item nav-link dropdown-toggle" href="/materials/" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Учёт опасных материалов
                  </a>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="/materials/main-harddm/">Твёрдые вещества</a>
                    <a class="dropdown-item" href="/materials/main-wetdm/">Жидкие вещества</a>
                    <a class="dropdown-item" href="#">Газообразные вещества</a>
                  </div>
              </div>
              <div class="dropdown open">
                  <a class="nav-item nav-link dropdown-toggle" href="/materials/" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Статистика по веществам
                  </a>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="/materials/statistics-harddm/">Твёрдые вещества</a>
                    <a class="dropdown-item" href="/materials/statistics-wetdm/">Жидкие вещества</a>
                    <a class="dropdown-item" href="#">Газообразные вещества</a>
                  </div>
              </div>
              <a class="nav-item nav-link" href="/about/">О проекте</a>
            </div>
 
 
 
            <!-- Navbar Right Side -->
            <div class="navbar-nav">
              
                 <a class="nav-item nav-link" href="/post/new/">Добавить новость</a>
                 <a class="nav-item nav-link" href="/profile/">Профиль</a>
                 <a class="nav-item nav-link" href="/logout/">Выйти</a>
              
            </div>
          </div>
        </div>
      </nav>
    </header>
 
    <main role="main" class="container">
      <div class="row">
        <div class="col-md-12">
          
          
    <div class="content-section">
        <form method="POST">
            <input type="hidden" name="csrfmiddlewaretoken" value="ueuWmxyWnMDo5QP8l4gAhW1xX370Y5zQgYyThiNtxswdPFLypZYg0cG8FgGWRJ3C">
            <fieldset class="form-group">
                <legend class ="border-bottom mb-4">
                    Запись о твёрдом грузе
                </legend>
                <label  class="col-form-label requiredField">
                    Выбор из справочника*
                </label>
                <select class="select form-control mb-4">
                    
                        <option>Циан</option>
                    
                        <option>Этан</option>
                    
                        <option>Циклопропан</option>
                    
                        <option>Изобутилен</option>
                    
                        <option>Метантиол</option>
                    
                        <option>Декалин</option>
                    
                        <option>Диоксан</option>
                    
                        <option>Этилбензол</option>
                    
                        <option>Этилформиат</option>
                    
                        <option>Триметилхлорсилан</option>
                    
                        <option>Фторид аммония</option>
                    
                        <option>Аминофенол</option>
                    
                        <option>Бромоформ</option>
                    
                        <option>Этилоксалат</option>
                    
                        <option>Метил трихлорацетат</option>
                    
                </select>
 
 
                
 
<div id="div_id_name" class="form-group"> <label for="id_name" class="col-form-label  requiredField">
                Наименование<span class="asteriskField">*</span> </label> <div class=""> <input type="text" name="name" maxlength="50" class="textinput textInput form-control" required id="id_name"> </div> </div> <div id="div_id_shortDesc" class="form-group"> <label for="id_shortDesc" class="col-form-label  requiredField">
                Краткое описание<span class="asteriskField">*</span> </label> <div class=""> <input type="text" name="shortDesc" maxlength="150" class="textinput textInput form-control" required id="id_shortDesc"> </div> </div> <div id="div_id_category" class="form-group"> <label for="id_category" class="col-form-label  requiredField">
                Класс опасности<span class="asteriskField">*</span> </label> <div class=""> <select name="category" class="select form-control" id="id_category"> <option value="Класс 1" selected>Класс 1</option> <option value="Класс 2">Класс 2</option> <option value="Класс 3">Класс 3</option> <option value="Класс 4">Класс 4</option> <option value="Класс 5">Класс 5</option> <option value="Класс 6">Класс 6</option> <option value="Класс 7">Класс 7</option> <option value="Класс 8">Класс 8</option> <option value="Класс 9">Класс 9</option>
 
</select> </div> </div> <div id="div_id_weight" class="form-group"> <label for="id_weight" class="col-form-label  requiredField">
                Масса<span class="asteriskField">*</span> </label> <div class=""> <input type="number" name="weight" step="any" class="numberinput form-control" required id="id_weight"> </div> </div>
 
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">ОК</button>
            </div>
        </form>
    </div>
 
        </div>
      </div>
    </main>
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
</body>
</html>

@m0nte-cr1st0 · 16.04.2019, 12:29

wool, Например, так.
Добавьте айди

HTML5
1
<select class="select form-control mb-4" id="elem">

JavaScript
1
2
3
$('#elem').on('change', function() {
  $('#id_name').val(this.value)
})

https://292233.playcode.io/

Вообще такие вопросы стоит в разделе JS задавать

И не забудьте подключить жиквери вверху хтмл.

@zdmagistr · 07.03.2022, 00:54

m0nte-cr1st0 Понимаю, что тема бородатая, но вот сейчас тоже подобный вопрос возник. а в js по нулям.
А как то можно значение value из скрипта получить в модели, чтобы по этому значение сделать сразу же запрос и обновить зависящие данные от этого select?

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	15.04.2019, 17:14
	wool, тут сложно в двух словах описать. Если я верно понял, то вам нужно в зависимости от выбранного значения в селекте подгружать соответствующие данные? Да, тут нужен JS тогда и два возможных варианта: 1. Загружать все данные - для всех селектов. Но написать скрипт, в котором будет обрабатываться выбранное значение и в зависимости от него выбирать нужные данные. 2. При клике на пункт - отправлять аякс запрос в Джанго, там обрабатывать данные и в ответ отправлять нужные данные в шаблон. 1

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	15.04.2019, 21:11
	wool, выгрузи все данные в этот шаблон. и покажи отрендеренный хтмл шаблон (не Django+HTML) со всеми селектами и данными. 0

@zdmagistr 5 / 4 / 1 Регистрация: 12.02.2017 Сообщений: 11
	07.03.2022, 00:54
	m0nte-cr1st0 Понимаю, что тема бородатая, но вот сейчас тоже подобный вопрос возник. а в js по нулям. А как то можно значение value из скрипта получить в модели, чтобы по этому значение сделать сразу же запрос и обновить зависящие данные от этого select? 0

Подгрузка полей в форму по выбору значения из выпадающего списка

Решение