如何将下拉列表选中值填充至输入框？是否需要绑定change事件？

嘿，我来帮你理清楚这个问题～

首先明确说：不需要绑定change事件，因为你当前的下拉项是用<a>标签实现的，不是原生<select>控件——change事件是针对<select>这类表单元素设计的，对<a>标签无效。

你需要给下拉里的每个选项绑定click点击事件，或者用更高效的事件委托，来实现点击选项后把文本同步到input框里。下面给你两种可行的实现方式：

方式1：给每个选项单独绑定点击事件 #

修改后的HTML代码 #

<div class="dropdown">
  <!-- 可选添加readonly，防止用户手动输入，让它更像下拉选择器 -->
  <input onclick="myFunction()" class="dropbtn" readonly />
  <div id="myDropdown" class="dropdown-content">
    <a href="#" onclick="selectItem(this)">Test1</a>
    <a href="#" onclick="selectItem(this)">Test2</a>
    <a href="#" onclick="selectItem(this)">Test3</a>
  </div>
</div>

对应的JavaScript代码 #

// 原有的下拉显示/隐藏逻辑保留
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// 新增的同步值函数
function selectItem(element) {
  // 获取目标input框
  const inputBox = document.querySelector('.dropbtn');
  // 将点击的选项文本赋值给input的value
  inputBox.value = element.textContent;
  // 可选：同步完成后自动关闭下拉框
  document.getElementById("myDropdown").classList.remove("show");
}

// 点击页面其他区域关闭下拉框的逻辑保留
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    const dropdowns = document.getElementsByClassName("dropdown-content");
    for (let i = 0; i < dropdowns.length; i++) {
      const openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

方式2：用事件委托（更优雅，适合动态新增选项的场景） #

如果后续可能动态添加下拉选项，推荐用事件委托——只给父容器绑定一次事件，不用给每个选项单独加onclick：

HTML代码（无需给a标签加onclick） #

<div class="dropdown">
  <input onclick="myFunction()" class="dropbtn" readonly />
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Test1</a>
    <a href="#">Test2</a>
    <a href="#">Test3</a>
  </div>
</div>

对应的JavaScript代码 #

// 原有的下拉显示/隐藏逻辑保留
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// 给下拉容器绑定点击事件（事件委托）
document.getElementById("myDropdown").addEventListener('click', function(e) {
  // 确保点击的是a标签
  if (e.target.tagName === 'A') {
    const inputBox = document.querySelector('.dropbtn');
    inputBox.value = e.target.textContent;
    // 同步后关闭下拉框
    this.classList.remove('show');
  }
});

// 点击页面其他区域关闭下拉框的逻辑保留
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    const dropdowns = document.getElementsByClassName("dropdown-content");
    for (let i = 0; i < dropdowns.length; i++) {
      const openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

简单总结下：你的场景里用click事件（或事件委托）就可以完美实现值同步，完全不需要用到change事件～

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