第一个select组件无法赋值至隐藏输入框，请求排查代码错误

我帮你定位到了代码里的两个关键问题，正是它们导致第一个select组件无法将选中文本传入对应的隐藏输入框：

1. 重复定义同名JavaScript函数 #

你先后写了两个名为setTextField的函数，在JavaScript里，后定义的函数会直接覆盖先定义的。这就导致第一个select的onchange事件调用的其实是第二个函数，而第二个函数的逻辑是更新semm这个隐藏输入框，完全和第一个select对应的cls无关。

2. 第二个函数存在变量名拼写错误 #

第二个函数的参数是ddl，但函数内部却写了dddl.selectedIndex（多了一个字母d），这会触发JavaScript报错，不过因为第一个函数已经被覆盖，这个错误是次要的，但也需要修正。

修复后的完整代码 #

我们给两个函数设置不同的名称，确保各自对应正确的隐藏输入框，同时修正变量名错误：

<select class='form-control' id='class_code' name='class_code' onchange='setClassTextField(this)'>
    <option value=''>Select class</option>
    <?php // 这里保留你的PHP循环逻辑，注意输出时加引号避免语法问题 ?>
    <option value='<?php echo $row['class_code']; ?>'><?php echo $row['class']; ?></option>
</select>
<input id='cls' type='hidden' name='cls' value='' />

<select class='form-control' id='semester_id' name='semester_id' onchange='setSemesterTextField(this)'>
    <option value=''>Select semester</option>
    <!-- 这里可添加你的学期选项生成逻辑 -->
</select>
<input id='semm' type='hidden' name='semm' value='' />

<script type='text/javascript'>
function setClassTextField(ddl) {
    document.getElementById('cls').value = ddl.options[ddl.selectedIndex].text;
}

function setSemesterTextField(ddl) {
    document.getElementById('semm').value = ddl.options[ddl.selectedIndex].text;
}
</script>

额外优化建议（可选） #

如果以后需要更多类似的select+隐藏输入框组合，我们可以写一个通用函数，通过传入目标隐藏框的ID来避免重复写函数：

<select class='form-control' id='class_code' name='class_code' onchange='setTargetTextField(this, "cls")'>
    <!-- 选项内容 -->
</select>
<input id='cls' type='hidden' name='cls' value='' />

<select class='form-control' id='semester_id' name='semester_id' onchange='setTargetTextField(this, "semm")'>
    <!-- 选项内容 -->
</select>
<input id='semm' type='hidden' name='semm' value='' />

<script type='text/javascript'>
function setTargetTextField(ddl, targetId) {
    document.getElementById(targetId).value = ddl.options[ddl.selectedIndex].text;
}
</script>

这样不管有多少个类似的组件，只需要一个函数就能搞定，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者lang