如何在JSP中将下拉框选中值显示到输入文本框？

嘿，作为JSP新手碰到这个需求完全不用慌～我给你分享两种简单的前端实现方法，不用复杂的后端操作就能搞定：

我们只需要给下拉框添加一个onchange事件，当选中项发生变化时，把选中的值同步到文本框里。修改后的代码如下：

<select class="leavetype" name="leavetype" onchange="setLeaveValue(this)">
    <option value="10">CL</option>
    <option value="7">ML</option>
    <option value="12">SL</option>
    <option value="20">EL/PL</option>
    <option value="5">CPL</option>
</select>
<input type="text" name="leave" id="leaveInput"/>

<script>
function setLeaveValue(selectElement) {
    // 获取下拉框选中的value值
    const selectedValue = selectElement.value;
    // 将值赋值给文本框
    document.getElementById('leaveInput').value = selectedValue;
}
</script>

小说明：我给文本框加了个id属性，这样能更方便地定位到它；onchange事件会在下拉框选项改变时触发setLeaveValue函数，把下拉框本身作为参数传进去，就能直接拿到选中的value啦。

如果想在页面刚加载时就默认显示第一个选项的值，只需要在script标签最后加一行代码：

setLeaveValue(document.querySelector('.leavetype'));

如果你的项目里已经用了jQuery库，代码会更简洁：

<select class="leavetype" name="leavetype">
    <option value="10">CL</option>
    <option value="7">ML</option>
    <option value="12">SL</option>
    <option value="20">EL/PL</option>
    <option value="5">CPL</option>
</select>
<input type="text" name="leave" class="leaveInput"/>

<script src="jquery.min.js"></script> <!-- 确保已经引入jQuery文件 -->
<script>
$(document).ready(function() {
    // 监听下拉框的change事件
    $('.leavetype').change(function() {
        // 把选中的值赋值给文本框
        $('.leaveInput').val($(this).val());
    });

    // 页面加载时默认触发一次change事件，显示初始值
    $('.leavetype').trigger('change');
});
</script>

这里用类选择器就能快速定位元素，change事件触发时直接同步值，还加了页面加载时的默认触发，不用手动选就能看到第一个选项的值。

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