如何将下拉框选中选项显示到指定文本框？附相关代码片段

我来帮你搞定这个需求——把下拉框选中的内容同步到文本框其实很简单，咱们直接看优化后的实现方案：

完整代码示例 #

HTML部分

<!-- 下拉框，对应你PHP生成的ID：clientName1 -->
<select id="clientName1">
  <option value="client_a">客户A - 张三</option>
  <option value="client_b">客户B - 李四</option>
  <option value="client_c">客户C - 王五</option>
</select>

<!-- 用于显示选中内容的文本框 -->
<input type="text" id="clientContac" placeholder="选中的客户信息会显示在这里" readonly>

JavaScript部分

(function() {
  // 获取下拉框和文本框的DOM引用
  const selectElement = document.getElementById('clientName<?php echo 1; ?>'); // 对应你的PHP变量$y=1
  const textBoxElement = document.getElementById('clientContac');

  // 监听下拉框的change事件（用户选中新选项时触发）
  selectElement.addEventListener('change', function() {
    // 获取选中选项的显示文本（如果需要值的话用this.value）
    const selectedText = this.options[this.selectedIndex].text;
    // 把选中内容赋值给文本框
    textBoxElement.value = selectedText;
  });

  // 可选：页面加载时默认显示当前选中的选项
  window.addEventListener('load', function() {
    const defaultSelectedText = selectElement.options[selectElement.selectedIndex].text;
    textBoxElement.value = defaultSelectedText;
  });
})();

关键优化点说明 #

• 事件选择：我把你原代码里的onmouseover换成了change事件——这才是正确的触发时机，只有当用户真正选中新选项时才会执行同步，而不是鼠标悬停就触发。
• 简化选中值获取：原代码里的getSelectedOption循环可以直接替换成this.options[this.selectedIndex]，一步到位获取选中的选项元素，不用手动循环判断。
• 可选的初始化同步：添加了页面加载时的默认值同步，避免页面刚打开时文本框是空的。

原代码的问题提醒 #

你原代码里的document.getElementById('clientContac').onmouseo...应该是写一半的onmouseover事件，这个事件不适合用来实现下拉框选中同步的需求，因为它会在鼠标移到文本框上就触发，和下拉框的选择操作无关，一定要换成change事件绑定在下拉框上哦。

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