我有 2 个字段(机器和工厂)需要根据用户在输入字段中选择的选项自动生成。 “机器”为下拉选项设置了一个数组,而“植物”则为下拉选项进行了硬编码。工厂正在工作并自动生成到标签上的正确位置。机器没有。同一段代码用于填充字段,但我无法找到为什么一个可以工作而另一个不能。请注意:我是一名 JR 程序员,在解释语法问题时,请像小孩子一样跟我说话。半句话让我更困惑。 TIA
我对这两个部分使用了相同的方法 (getElementById)。我尝试删除工作部分以查看是否有重复且没有任何更改的内容。我尝试交换名称和 ID,看看它是否可能指向错误的方向,并且没有任何改变。我通过交换两个字段来验证 CSS 是否正确,并在机器部分中得到“plant”,没有出现任何问题。 请在此处查看完整代码:github 链接
<!-- in the head portion-->
<script type="text/JavaScript">
var machine = ['','WH','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20',
'21','22','23','24','25','26','27','28','29','30','31','32','33','34'];
for (i=0; i < 99; i++) {
var opt = Math.floor(Math.random() * 99);
machine.push(opt);
}
$(function() {
var options = '';
for (var i = 0; i < machine.length; i++) {
options += '<option value="' + machine[i] + '">' + machine[i] + '</option>';
}
$('#machine').html(options);
});
</script>
<!-- in the body portion-->
<fieldset class="input">
<label for="item-number">item number: </label>
<input id="order-number" name="order-number" type="text" required />
<label for="machine">machine
<select id="machine" name="machine" onchange="myFunction2()">
<option value="">(select type)</option>
</select>
</label>
<label for="plant">PLANT
<select id="plant" name="plant" onchange="myFunction1()">
<option value="">(select plant)</option>
<option value="1">SP</option>
<option value="2">CT</option>
<option value="3">PF</option>
<option value="4">RN</option>
<option value="5">MI</option>
<option value="6">KY</option>
</select>
</label>
<label for="copies">copies: </label>
<input id="copies" name="copies" type="text" required />
<button class="glow-on-hover" type="submit" onclick="SubmitEvent" id="submitBtn">SUBMIT</button>
</fieldset>
<!-- lower in the body portion-->
<div class="plt">
<script>
const plt1 = document.getElementById("plant").value
function myFunction1() {
var mylist = document.getElementById("plant");
document.getElementById("disp").value = plant.options[plant.selectedIndex].text;
}
</script>
<p><input type="text" id="disp" size="1">-</p>
</div>
<div class="mch">
<script>
const mch1 = document.getElementById("machine").value
function myFunction2() {
var mylist2 = document.getElementById("machine");
document.getElementById("disp2").value = machine.options[machine.selectedIndex].text;
}
</script>
TYVM 对于那些提供帮助的人,尤其是那些花时间将其分解得足够多的人,我可以理解特定部分的关系。这是最终的解决方案:
<!-- This auto populates the specific machine used on the label -->
<script>
const mch1 = document.getElementById("mylist2").value
function myFunction2() {
var mylist2 = document.getElementById("machine");
document.getElementById("disp2").value = mylist2.options[mylist2.selectedIndex].text;
}
</script>
<p><input type="text" id="disp2" size="1"></p>
</div>