Фильтрация в выпадающем списке

@Lastik228 · Регистрация: 20.04.2017

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

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

Python
1
2
3
4
5
6
class Wardrobes(models.Model):
    title = models.CharField(max_length=120)# наименование материала
    quantity_or_meter = models.DecimalField(max_digits=9, decimal_places=2)
    price = models.DecimalField(max_digits=9, decimal_places=2)
    def __str__(self):
        return self.title

так создаю таблицу

HTML5
1
2
3
4
5
6
7
8
9
10
11
<table id="node1" border="2" class="table-bordered table-dark">
      <tr>
<input id="addRow1" type="image" style="width:5%;height:5%" src='{% static "image/knopka.png" %}'class="btn btn-success"><a>iшкафы</a>
      </tr>
</table>
<script >
document.getElementById("addRow").onclick = function() {
    var row = document.createElement("tr");
    row.innerHTML ='<td><select  name="hero">{% for wardrobes in wardrobes %}<option>{{wardrobes.title}}</option>{%endfor%}</select></td><td><div contenteditable >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>';
    document.getElementById("node").appendChild(row);
}

@m0nte-cr1st0 · 22.04.2019, 09:31

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

@Lastik228 · 22.04.2019, 10:35 **[ТС]**

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

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

я так понял он данные из js берет а не из базы или я не прав?

@m0nte-cr1st0 · 22.04.2019, 10:43

Сообщение от Lastik228

я так понял он данные из js берет а не из базы или я не прав?

Данные не могут быть в js, это язык программирования...

@Lastik228 · 22.04.2019, 11:02 **[ТС]**

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

Данные не могут быть в js, это язык программирования...

сори неправильно выразился. что означает change?

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

@m0nte-cr1st0 · 22.04.2019, 12:13

Lastik228, изменение в этом элементе

@Lastik228 · 22.04.2019, 14:23 **[ТС]**

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

изменение в этом элементе

подскажи что не так? как правильно его добавить?
подключаю скачанный jquery

HTML5
1
2
3
<link rel="stylesheet" href='{% static "js/jquery-3.0.0.min.js" %}'>
<link rel="stylesheet" href='{% static "js/jquery-migrate-1.4.1.min.js" %}'>
<link rel="stylesheet" href='{% static "js/bootstrap.min.js" %}'>

форма из js с добавление таблицы и данных

JavaScript
1
2
3
4
5
document.getElementById("addRow1").onclick = function() {
    var row = document.createElement("tr");
    row.innerHTML ='<td><select id="elem"name="hero1">{% for equipments in equipments %}<option>{{equipments.title}}</option>{%endfor%}</select></td>{% for equipments in equipments %}<td for="Price"><div contenteditable >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>{%endfor%}';
    document.getElementById("node1").appendChild(row);
}

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

@m0nte-cr1st0 · 22.04.2019, 15:35

Lastik228, покажите отрендеренный хтмл шаблон страницы.

@Lastik228 · 23.04.2019, 07:41 **[ТС]**

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

покажите отрендеренный хтмл шаблон страницы.

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
<html><head>
 
     <link rel="stylesheet" href="/static/css/bootstrap.css">
<link rel="stylesheet" href="/static/css/menu.css">
<link rel="stylesheet" href="/static/js/jquery-3.0.0.min.js">
<link rel="stylesheet" href="/static/js/jquery-migrate-1.4.1.min.js">
<link rel="stylesheet" href="/static/js/bootstrap.min.js">
 
    <title></title>
</head>
 
      <body><h1 style="text-align: center;">Калькулятор стандарта СКС</h1>
 
<div id="tableWrap">
  <table class="table-bordered table-dark">
    <tbody><tr>
      <td>количество рабочих мест</td>
      <th><div contenteditable="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></th>
    </tr>
    <tr><td>средняя зарплата</td>
      <td><div contenteditable=""></div></td>
    </tr>
    <tr><td>дл клк</td>
      <td><div contenteditable=""></div></td>
    </tr>
    <tr><td>%чего то</td>
      <td><div contenteditable=""></div></td>
    </tr>
  </tbody></table>
</div>
<h1></h1>
 <input id="addRow" type="image" style="width:5%;height:5%" src="/static/image/knopka.png" class="btn btn-success"><a>Шкафы</a><table id="node" border="1" class="table-bordered table-dark">
      <tbody><tr>
 
</tr>
</tbody><tr><td><select id="elem" name="hero"><option>1</option><option>ыувапнрг</option><option>Средняя длина кабеля (от шкафа до рабочего места), м</option></select></td><tdfor="price"><div contenteditable="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></tdfor="price"></tr></table>
<h1></h1>
<input id="addRow1" type="image" style="width:5%;height:5%" src="/static/image/knopka.png" class="btn btn-success"><a>оборудование</a><table id="node1" border="2" class="table-bordered table-dark">
      <tbody><tr>
 
      </tr>
</tbody><tr><td><select id="elem" name="hero1"><option>re</option><option>erdghj</option></select></td><td for="Price"><div contenteditable="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td><td for="Price"><div contenteditable="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td></tr></table>
 <h1></h1><table class="table-bordered table-dark">
  <tbody>
    
    <tr>
      <td scope="row">наценка</td>
      <td><div contenteditable="">&nbsp;&nbsp;1,3&nbsp;&nbsp;</div></td>
    </tr>
  </tbody>
  </table>
  <h1></h1>
<input type="button" class="btn btn-success" value="Расчет" onclick="addition();"><br>
 <h1></h1>
 
  <table class="table-bordered table-dark">
    <tbody><tr>
      <th>эконом</th>
      <th><div contenteditable="">&nbsp;&nbsp;&nbsp;&nbsp;</div></th>
    </tr>
    <tr><td>оптима</td>
      <td><div contenteditable=""><div id="result"></div></div></td>
    </tr>
    <tr><td>премиум</td>
      <td><div contenteditable=""></div></td>
    </tr>
    <tr><td>лофт</td>
      <td><div contenteditable=""></div></td>
    </tr>
  </tbody></table>
 
  <h1></h1>
  <div class="" style="text-align: center;">
  <button type="button1" class="btn btn-success">Вывод в Excel</button>
</div>
<script>
document.getElementById("addRow").onclick = function() {
    var row = document.createElement("tr");
    row.innerHTML ='<td><select id="elem"name="hero"><option>1</option><option>ыувапнрг</option><option>Средняя длина кабеля (от шкафа до рабочего места), м</option></select></td><tdfor="Price"><div contenteditable >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>';
    document.getElementById("node").appendChild(row);
}
 
document.getElementById("addRow1").onclick = function() {
    var row = document.createElement("tr");
    row.innerHTML ='<td><select id="elem" name="hero1"><option>re</option><option>erdghj</option></select></td><td for="Price"><div contenteditable >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td><td for="Price"><div contenteditable >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>';
    document.getElementById("node1").appendChild(row);
}
 
function addition() {
      var a = parseInt(document.getElementById('a').td);
      var b = parseInt(document.getElementById('b').td);
 
      if (isNaN(a)==true) a=0;
      if (isNaN(b)==true) b=0;
 
      var c = a + b;
 
      document.getElementById('result').innerHTML = a + " + " + b + " = " + c;
    }
 
$('#elem').on('change', function() {
  $('#Price').val(this.value)
})
 
$(function(){
    $('button1').click(function(){
        var url='data:application/vnd.ms-excel,' + encodeURIComponent($('#tableWrap').html()) 
        location.href=url
        return false
    })
})
</script>
 
 
</body></html>

@m0nte-cr1st0 · 23.04.2019, 11:41

Lastik228, непонятно, какие данные вы хотите выводить для "Средней длины кабеля", например? Они есть у Вас на странице? Или их нужно с базы получать.

@Lastik228 · 23.04.2019, 11:51 **[ТС]**

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

"Средней длины кабеля"

это выводится в select мне же надо при выборе например чего то другого из select подтягивались данные из базы а это именно Quantity or meter и Price и становились рядом с выбранным элементом.

@m0nte-cr1st0 · 23.04.2019, 12:23

Lastik228, ну если не хочешь заранее подгружать все данные на страницу, тогда формируй запрос, обрабатывай его и возвращай json обратно с нужными тебе данными.

@Lastik228 · 23.04.2019, 12:24 **[ТС]**

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

заранее подгружать все данные на страницу

как их заранее подгрузить?
есть манул какой ни будь или пример?

@m0nte-cr1st0 · 23.04.2019, 12:38

Во вьюхе

Python
1
wardrobes = Wardrobes.objects.all()

В шаблоне

HTML5
1
2
3
4
{% for wardobe in wardobes %}
    <span class="wardobe q_m">{{ wardobe.quantity_or_meter }}</span>
    <span class="wardobe price">{{ wardobe.price }}</span>
{% endfor %}

@Lastik228 · 23.04.2019, 13:16 **[ТС]**

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

В шаблоне

куда именно вставлять?

Добавлено через 31 минуту

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

В шаблоне

все допер сори просто долго думаю очень

. нет это мне не сильно подходит так как данных будет много а клиенту нужно будет выбрать только несколько.есть мануал по второму виду как вы предложили?там где нужно формировать запрос, обрабатывать его и возвращать json обратно с нужными данными.

@m0nte-cr1st0 · 23.04.2019, 13:25

Lastik228, насчёт мануалов не знаю, но вот неплохой пример.
https://youtu.be/dx6uXEuPtw4?t=476

@Lastik228 · 23.04.2019, 13:33 **[ТС]**

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

но вот неплохой пример

примерно понял окей.можешь так же с этим вопросом помочь Несколько таблиц в один Excel

@m0nte-cr1st0 · 23.04.2019, 13:41

Lastik228, не знаю, с таким не сталкивался. но очевидно вам нужно сначала определить все эти таблицы в одну переменную и затем в цикле пройтись по ним и сохранить в один эксель файл.

Добавлено через 51 секунду
Если у вас сохраняет только одну таблицу, то либо вы определили всего одну таблицу, либо вы просто не прошлись по всем таблицам.

@Lastik228 · 25.04.2019, 13:25 **[ТС]**

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

но вот неплохой пример

я примерно написал код но он выводит немного не так. при выборе из select я ввожу данные в консоль а он выводит не числа а только по одному элементу.это выводиться в консоль [1.0, 234.0, 31.0] и при выборе из select для первого элемента он мне выводит "[" под вторым "1" и под третьим "."

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
<script type="text/javascript">
  var v = "{{ prices }}";
    function Add_option_to_select()
    {
       var CountryObj = document.getElementById("SelectMyLove");
       var ResortObj = document.getElementById("resort");
       var selind = CountryObj.options.selectedIndex;
       console.log(v)
        ResortObj.value = v[selind];
 }
 
  </script>
 
 
<table>
<tr><td valign="top">
<br /><br />
<SELECT name="SelectMyLove" id="SelectMyLove" onChange="Add_option_to_select();">
{% for wardrobe in wardrobes %}
      <option VALUE="0">{{wardrobe.title}}</option>
    {%endfor%}
</SELECT>
</td>
<td valign="top">
<br /><br />
<input type="text" id="resort" readonly/>
</td>
</tr>
 
</table>

@m0nte-cr1st0 · 25.04.2019, 13:47

Lastik228, скидываете отрендеренный хтмл шаблон страницы, а не джанговский.
и я не увидел у вас запроса к серверу.

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 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
	22.04.2019, 09:31
	Подгрузка полей в форму по выбору значения из выпадающего списка 0

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	22.04.2019, 12:13
	Lastik228, изменение в этом элементе 0

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	22.04.2019, 15:35
	Lastik228, покажите отрендеренный хтмл шаблон страницы. 0

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	23.04.2019, 11:41
	Lastik228, непонятно, какие данные вы хотите выводить для "Средней длины кабеля", например? Они есть у Вас на странице? Или их нужно с базы получать. 0

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	23.04.2019, 12:23
	Lastik228, ну если не хочешь заранее подгружать все данные на страницу, тогда формируй запрос, обрабатывай его и возвращай json обратно с нужными тебе данными. 0

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	23.04.2019, 13:25
	Lastik228, насчёт мануалов не знаю, но вот неплохой пример. https://youtu.be/dx6uXEuPtw4?t=476 1

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	23.04.2019, 13:41
	Lastik228, не знаю, с таким не сталкивался. но очевидно вам нужно сначала определить все эти таблицы в одну переменную и затем в цикле пройтись по ним и сохранить в один эксель файл. Добавлено через 51 секунду Если у вас сохраняет только одну таблицу, то либо вы определили всего одну таблицу, либо вы просто не прошлись по всем таблицам. 0

@m0nte-cr1st0 1043 / 578 / 242 Регистрация: 15.01.2019 Сообщений: 2,178 Записей в блоге: 1
	25.04.2019, 13:47
	Lastik228, скидываете отрендеренный хтмл шаблон страницы, а не джанговский. и я не увидел у вас запроса к серверу. 0