我试图让某个表单中的某些字段显示,具体取决于下拉菜单的选择。这是我的代码的简化版本,尝试将显示从“无”更改为“阻止”。出了什么问题?
function selectTrain(trainType) {
document.getElementById("test").innerHTML = (trainType);
var elements = document.getElementsByClassName(trainType);
for (var i = 0, length = elements.length; i < length; i++) {
elements[i].style.display = 'inline-block';
}
};
<select onchange="selectTrain(this.value)">
<option value="" disabled="disabled" selected="selected">Please select a train type</option>
<option value="lhcs">Loco-hauled carriage set</option>
<option value="mu">Multiple Unit</option>
<option value="f">Frieght</option>
</select>
<!-- Form -->
<form name="myForm">
<p>Formation Information:</p>
<ul>
<li class="lhcs f">Loco number: <input type="text" id="locoid1"></li>
<li class="lhcs">Loco number: <input type="text" id="locoid2"></li>
<li class="mu">Formation number: <input type="text" id="formationid">
</li>
</ul>
<p>Names:</p>
<ul>
<li class="lhcs f">Loco name: <input type="text" id="loconame1"></li>
<li class="lhcs">Loco name: <input type="text" id="loconame2"></li>
<li class="mu">Formation name: <input type="text" id="formationname"></li>
<li class="lhcs mu">Train name: <input type="text" id="trainname"></li>
</ul>
<p>Train Operating Company:</p>
<ul>
<li class="lhcs">Loco TOC: <input type="text" id="locotoc1"></li>
<li class="lhcs">Loco TOC: <input type="text" id="locotoc2"></li>
<li class="lhcs">Carriage TOC: <input type="text" id="cartoc"></li>
<li class="mu">Formation TOC: <input type="text" id="formationtoc"></li>
</ul>
<p>Places:</p>
<ul>
<li class="lhcs mu f">Spot or embark point: <input type="text" list="places" id="placeorigin"></li>
<li class="lhcs mu">Destination: <input type="text" list="places" id="placedest"></li>
</ul>
<p>Date and Time:</p>
<input type="date" id="dateandtime">
<p>Number of Carriages: </p>
<input type="number" id="carnum">
<ul>
<li class="lhcs mu">Carriage 1: <input type="text" id="carid1"></li>
</ul>
<button id='submission' type='button' onClick="goForIt()">Submit</button>
</form>
答案 0 :(得分:1)
您只是忘了向DOM添加id =&#34; test&#34;的元素,例如<div id="test"></div>
。查看代码段,它有效(我已在页面底部添加了此div
):
function selectTrain(trainType) {
document.getElementById("test").innerHTML = (trainType);
var elements = document.getElementsByClassName(trainType);
for(var i = 0, length = elements.length; i < length; i++) {
elements[i].style.display = 'inline-block';
}
};
&#13;
<select onchange="selectTrain(this.value)">
<option value="" disabled="disabled" selected="selected">Please select a train type</option>
<option value="lhcs">Loco-hauled carriage set</option>
<option value="mu">Multiple Unit</option>
<option value="f">Frieght</option>
</select>
<!-- Form -->
<form name="myForm">
<p>Formation Information:</p>
<ul>
<li class="lhcs f">Loco number: <input type="text" id="locoid1"></li>
<li class="lhcs">Loco number: <input type="text" id="locoid2"></li>
<li class="mu">Formation number: <input type="text" id="formationid">
</li>
</ul>
<p>Names:</p>
<ul>
<li class="lhcs f">Loco name: <input type="text" id="loconame1"></li>
<li class="lhcs">Loco name: <input type="text" id="loconame2"></li>
<li class="mu">Formation name: <input type="text" id="formationname"></li>
<li class="lhcs mu">Train name: <input type="text" id="trainname"></li>
</ul>
<p>Train Operating Company:</p>
<ul>
<li class="lhcs">Loco TOC: <input type="text" id="locotoc1"></li>
<li class="lhcs">Loco TOC: <input type="text" id="locotoc2"></li>
<li class="lhcs">Carriage TOC: <input type="text" id="cartoc"></li>
<li class="mu">Formation TOC: <input type="text" id="formationtoc"></li>
</ul>
<p>Places:</p>
<ul>
<li class="lhcs mu f">Spot or embark point: <input type="text" list="places" id="placeorigin"></li>
<li class="lhcs mu">Destination: <input type="text" list="places" id="placedest"></li>
</ul>
<p>Date and Time:</p>
<input type="date" id="dateandtime">
<p>Number of Carriages: </p>
<input type="number" id="carnum">
<ul>
<li class="lhcs mu">Carriage 1: <input type="text" id="carid1"></li>
</ul>
<button id='submission' type='button' onClick="goForIt()">Submit</button>
</form>
<div id="test"></div>
&#13;