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

【问题标题】：Dynamically change span text based on selected option javascript根据所选选项 javascript 动态更改跨度文本
【发布时间】：2019-01-04 19:28:03
【问题描述】：

我正在尝试根据选择的选项动态更改跨度的文本。 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

但这并没有成功。

【问题讨论】：

innerText，你有大小写差异。您是否也在将此逻辑作为更改事件处理程序的一部分或其他什么？
你的 span 上的 id 也没有正确关闭。

标签： javascript jquery html django innerhtml

【解决方案1】：

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

您还需要为您的select 附加您的函数到onchange 之类的事件处理程序。

<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>

【讨论】：