如何获取select下拉框选中option的ID值并填入input输入框

你需要修改两处代码即可完成需求：

1. 修改select标签的onchange传参 #

将原来传入this.value改为传入整个select元素对象this，修改后的select标签对应属性如下：

<select name="student_class" class="input_box" onchange="myFunction(this);">
<!-- 下方option代码保持不变 -->

2. 修改JavaScript函数逻辑 #

在函数内先获取当前选中的option节点，再读取它的id属性赋值给输入框，完整JS代码如下：

<script type="text/javascript">
function myFunction(selectEle)
{
    // 获取当前选中的option节点
    const selectedOption = selectEle.options[selectEle.selectedIndex];
    // 读取option的id属性赋值给输入框
    document.getElementById("actual_fee").value = selectedOption.id;
}
</script>

可选优化建议 #

当前你的代码中多个option共用同一个id值，不符合HTML标准中id全局唯一的要求，后续维护容易出问题。你可以把存储金额的属性改为自定义data属性，使用更规范：

修改option示例： #

<option value="Play Group" data-fee="1400">Play Group</option>

对应JS取值逻辑修改为： #

document.getElementById("actual_fee").value = selectedOption.dataset.fee;

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