根据选定的选项javascript动态更改范围文本

Question

我正在尝试根据所选的选项动态更改范围的文本。 PS：我正在使用Django + Python来生成选项

这是我的代码：

<select class="form-control" id="materials">
    {% for material2 in materials %}
        <option value="{{ material2.name }}">{{ material2.name }}</option>
    {% endfor %}
</select>
<span id="material_display></span>

我试过了 ：

var selected_material = document.getElementById("materials").value;
document.getElementById("material_display").innerTEXT = selected_material

但这没有成功。

Answer 1

这是innerText，而不是innerTEXT和你的id的span没有正确关闭;你只在id的左边有一个引号，并且缺少id右边的引号。

你还需要将你的函数附加到像onchange这样的select事件处理程序。

<select id="materials" onchange="showChange()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/>
<span id="material_display"></span>
<script>
function showChange(){
var selected_material = document.getElementById("materials").value;
document.getElementById("material_display").innerText = selected_material;
}
</script>