根据选定的选项javascript动态更改跨度文本 [英] Dynamically change span text based on selected option javascript

问题描述

我正在尝试根据选择的选项动态更改跨度的文本. PS:我正在使用Django + Python生成选项

I'm trying to change dynamically the text of a span based on the the option that got selected. PS: I'm using Django + Python to generate options

这是我的代码:

<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

但是那没有解决.

推荐答案

它是innerText，不是innerTEXT，并且您的span的id没有正确关闭；您在id的左侧只有一个引号，而在id的右侧缺少引号.

It's innerText, not innerTEXT and the id of your span is not closed properly; you only have one quotation mark to the left of the id and are missing the quotation mark to the right of the id.

您还需要将函数附加到事件处理程序(例如select的onchange).

You also need to attach your function to an Event Handler like onchange for your 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动态更改跨度文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！