在前端开发中，经常会遇到需要根据用户选择的下拉列表项动态设置表单元素的值的情况。本文将介绍如何使用Javascript来实现这个功能。
HTML结构
首先，我们需要在HTML中定义一个下拉列表和一个隐藏表单域：
<select id="mySelect"> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> <input type="hidden" id="hiddenInput">
这里我们使用了<select>标签定义下拉列表，并为其设置了一个ID属性（id="mySelect"）。另外，我们还定义了一个隐藏的表单域（<input type="hidden">），同样为其设置了一个ID属性（id="hiddenInput"）。
Javascript代码
接下来，我们使用Javascript代码来实现下拉菜单值变化时设置隐藏表单的值的功能。具体实现如下：
const selectElement = document.getElementById("mySelect");
const hiddenInputElement = document.getElementById("hiddenInput");
selectElement.addEventListener("change", function() {
const selectedValue = selectElement.value;
hiddenInputElement.value = selectedValue;
});这段代码首先使用document.getElementById()方法获取了下拉列表和隐藏表单域的DOM元素，然后调用addEventListener()方法为下拉列表添加了一个"change"事件的监听器。当下拉列表的值发生变化时，该监听器内部的回调函数将被执行，其中我们获取了用户当前选择的下拉菜单项的值，并将其赋值给隐藏表单域。
示例代码
最后，我们来看一下完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------------------
-------
------
------- --------------
------- ----------------------------
------- ----------------------------
------- ----------------------------
---------
------ ------------- -----------------
--------
----- ------------- - ------------------------------------
----- ------------------ - ---------------------------------------
---------------------------------------- ---------- -
----- ------------- - --------------------
------------------------ - --------------
---
---------
-------
-------当用户在页面中选择一个不同的下拉菜单项时，隐藏表单域的值就会随之发生改变。这样，我们就成功地使用Javascript实现了下拉菜单值变化时设置隐藏表单的值的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27964