根据所选选项动态更改跨度文本 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，你的span的id没有正常关闭； 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>

根据所选选项动态更改跨度文本 javascript

Dynamically change span text based on selected option javascript

html

javascript

django

jquery

innerhtml