Нужно передать переменную из <select>

Question

Нужно передать переменную из <select>

Серж Знаток (297), на голосовании 2 месяца назад

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hide{
display:none;
}
.hide.show{
display: block;
}

</style>

<script>
window.addEventListener('DOMContentLoaded', function() {
var select = document.querySelector('#main'),
hide = document.querySelectorAll('.hide');
function change()
{
[].forEach.call(hide, function(el) {
var add = el.classList.contains(select.value) ? "add" : "remove"
el.classList[add]('show');
});
}
select.addEventListener('change', change);
change()
});
</script>
</head>

<body>
<select id="main" name="main" class="main_field" aria-required="true">
{% for c in cards %}
{% if c.cod == None %}
<option value="{% c.id %}">{{c.name}}</option>
{% endif %}

{% endfor %}
</select>
<hr>
<!---- сюда должны передаться данные c.id ----!>

</body>
</html>

Данные передаются в скрипт из бд, необходимо из <select> вывести переменную c.id, или c.name Давно не программировал, не могу сообразить как это сделать. Помогите пожалуйста

Answer 1

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hide{
display:none;
}
.hide.show{
display: block;
}
</style>

<script>
window.addEventListener('DOMContentLoaded', function() {
var select = document.querySelector('#main'),
hide = document.querySelectorAll('.hide'),
output = document.querySelector('#output'); // Элемент для вывода выбранного значения

function change() {
[]. forEach.call (hide, function(el) {
var add = el.classList.contains(select.value) ? "add" : "remove";
el.classList[add]('show');
});

// Обновляем содержимое элемента с id "output"
output.textContent = "Выбранный ID: " + select.value + ", Имя: " + select.options[select.selectedIndex].text;
}

select.addEventListener('change', change);
change();
});
</script>
</head>

<body>
<select id="main" name="main" class="main_field" aria-required="true">
{% for c in cards %}
{% if c.cod == None %}
<option value="{{ c.id }}">{{ c.name }}</option>
{% endif %}
{% endfor %}
</select>
<hr>

</body>
</html>