如何在页面加载时从下拉选择中显示选定的输入字段

在页面加载时从下拉选择中显示选定的输入字段，可以通过以下步骤实现：

在HTML中定义一个下拉选择框（select）和对应的输入字段（input）。

<select id="dropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<input type="text" id="inputField">

使用JavaScript监听下拉选择框的变化事件（change event）。

document.getElementById("dropdown").addEventListener("change", function() {
  // 获取选中的值
  var selectedValue = this.value;

  // 根据选中的值设置输入字段的值
  document.getElementById("inputField").value = selectedValue;
});

以上代码中，我们通过addEventListener方法为下拉选择框添加了一个change事件监听器。当选择框的值发生变化时，回调函数会被触发。

当页面加载完成时，初始化下拉选择框的选中值对应的输入字段的值。

window.addEventListener("load", function() {
  // 获取选中的值
  var selectedValue = document.getElementById("dropdown").value;

  // 设置输入字段的值
  document.getElementById("inputField").value = selectedValue;
});

以上代码中，我们通过addEventListener方法为window对象添加了一个load事件监听器。当页面加载完成时，回调函数会被触发，我们可以在回调函数中获取下拉选择框的选中值，并将其设置为输入字段的值。

这样，在页面加载时，下拉选择框中选定的输入字段就会显示在对应的输入字段中。

这个方法适用于各种场景，例如表单中的联动选择、动态展示选项等。腾讯云提供了丰富的云计算产品，例如云服务器、云数据库、云存储等，可以根据具体需求选择适合的产品进行开发和部署。

参考链接：