如何使用HTML、CSS、JavaScript显示下拉列表选中项

自定义下拉选框无法展示选中项，是代码存在多处逻辑、语法问题导致的，逐一修复即可实现选中项正常展示的效果。

现存问题点 #

• 循环渲染选项时边界判断错误：i <= country.length会触发数组越界，最后一次循环读取到undefined值直接报错
• 未给动态生成的选项绑定点击选中事件，点击选项后没有逻辑同步选中值到触发按钮，也不会自动收起下拉
• 每次点击下拉按钮都会重复追加渲染所有国家选项，多次点击会出现大量重复选项
• CSS语法错误：.dropdown类的样式块缺失选择器声明
• HTML语法错误：下拉按钮的class属性漏写等号
• 下拉容器绑定的show()函数未定义，属于无效逻辑

修复后完整代码 #

JavaScript部分 #

// 国家数据全局声明，避免每次打开下拉重复创建
const country = [
  {"ID": "001", "Country_Name": "India"},
  {"ID": "002", "Country_Name": "Australia"},
  {"ID": "003", "Country_Name": "Austria"},
  {"ID": "004", "Country_Name": "China"},
  {"ID": "005", "Country_Name": "Bangladesh"}
];

function myFunction() {
  const dropdown = document.getElementById("myDropdown");
  const optionContainer = document.getElementById("optionWrap");
  dropdown.classList.toggle("show");
  
  // 先清空已有选项，避免重复渲染
  optionContainer.innerHTML = '';
  // 修正循环边界，使用i < country.length避免越界
  for (let i = 0; i < country.length; i++) {
    const a = document.createElement('a');
    a.setAttribute('data-id', country[i].ID);
    a.textContent = country[i].Country_Name;
    // 绑定选项点击选中逻辑
    a.addEventListener('click', function() {
      // 将选中的国家名更新到按钮文本
      document.querySelector('.dropbtn').textContent = this.textContent;
      // 存储选中项对应的ID，方便后续业务逻辑读取
      document.querySelector('.dropbtn').setAttribute('data-selected-id', this.getAttribute('data-id'));
      // 选中后自动收起下拉
      dropdown.classList.remove('show');
      // 重置搜索框和选项显示状态
      document.getElementById("myInput").value = '';
      const allOptions = optionContainer.getElementsByTagName("a");
      for(let j = 0; j < allOptions.length; j++) {
        allOptions[j].style.display = "";
      }
    })
    optionContainer.appendChild(a);
  }
}

function filterFunction() {
  const input = document.getElementById("myInput");
  const filter = input.value.toUpperCase();
  const optionContainer = document.getElementById("optionWrap");
  const a = optionContainer.getElementsByTagName("a");
  for (let i = 0; i < a.length; i++) {
    const txtValue = a[i].textContent || a[i].innerText;
    a[i].style.display = txtValue.toUpperCase().indexOf(filter) > -1 ? "" : "none";
  }
}

// 点击页面其他区域自动收起下拉
window.addEventListener('click', function(e) {
  if (!e.target.matches('.dropbtn')) {
    const dropdown = document.getElementById("myDropdown");
    if (dropdown.classList.contains('show')) {
      dropdown.classList.remove('show');
    }
  }
})

CSS部分 #

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {
  outline: 3px solid #ddd;
}
/* 补全缺失的.dropdown选择器 */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropbtn {
  padding: 12px 16px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  min-width: 230px;
  text-align: left;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.show {
  display: block;
}

HTML部分 #

<div class="dropdown">
  <!-- 补全class属性缺失的等号 -->
  <button onclick="myFunction()" class="dropbtn">请选择国家</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="搜索国家..." id="myInput" onkeyup="filterFunction()">
    <!-- 新增独立选项容器，避免渲染/清空选项时误删搜索框 -->
    <div id="optionWrap"></div>
  </div>
</div>

最终交互效果 #

• 点击下拉按钮可正常展开/收起国家列表，不会出现重复选项
• 搜索框输入关键词可正常过滤匹配的国家选项
• 点击任意国家选项后，按钮文本会自动更新为选中的国家名称，同时自动收起下拉框
• 点击页面其他空白区域会自动收起下拉，符合常规下拉组件交互逻辑
• 选中项对应的国家ID会存储在按钮的data-selected-id属性上，后续提交表单时直接读取该属性值即可

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