自定义下拉选择框选项无法选中，附HTML/CSS/JS代码求排查

已定位的核心问题 #

• JS语法错误：代码中直接使用.select.addEventListener()绑定事件，该写法不属于合法JavaScript语法，浏览器会直接抛出未定义引用错误，导致后续所有JS逻辑无法执行。实际代码中已经通过document.querySelector(".select")拿到了对应DOM元素并存入select变量，不需要硬写CSS选择器语法当对象调用。
• 选项赋值逻辑错误：选项点击事件中写了o.querySelector("label").innerHTML的取值逻辑，但实际HTML结构中.dropdown-list_item内部没有嵌套<label>标签，该选择器会返回null，点击选项时会触发空引用报错，无法完成选中值更新。
• 样式逻辑冲突：CSS中给.dropdown设置了hover即显示下拉列表的规则，但完全没有定义和JS配套的.active类对应的下拉列表显隐样式，导致点击切换的逻辑完全失效；同时代码中存在多处无效CSS值：opacity:10不属于合法取值（opacity合法范围为0-1）、.dropdown-select下的font-size:1.6 rem数值与rem单位间存在空格，均会被浏览器直接忽略。
• HTML结构缺失闭合：原有代码中#wrapper、#textbox、#content等父级标签没有正确闭合，可能造成DOM解析偏移、元素选择不准的问题。

修复实现 #

1. 修正JS绑定逻辑，将无效的.select调用替换为已定义的select变量，同时把选项取值逻辑替换为直接读取当前选项的文本内容
2. 删除hover触发下拉列表显示的冗余规则，补充.dropdown-list.active的显隐样式，匹配JS的类切换逻辑
3. 修正所有无效CSS值，补全HTML的标签闭合，保证DOM结构完整、样式声明生效

修复后核心代码参考 #

修正后的JavaScript

const select = document.querySelector(".select");
const optionsContainer = document.querySelector(".dropdown-list");
const optionsList = document.querySelectorAll(".dropdown-list_item");

select.addEventListener("click", () => {
  optionsContainer.classList.toggle("active");
})

optionsList.forEach(item => {
  item.addEventListener("click", () => {
    select.textContent = item.textContent.trim();
    optionsContainer.classList.remove("active");
  });
});

修正后的CSS

.dropdown{
  width: 20rem;
  position: relative;
  padding-left: 20%;
  color:white;
}

.dropdown-select{
  padding: 1.5rem;
  border-radius: 4px;
  background-color: black;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.6rem;
  cursor: pointer;
}

.dropdown-list{
  border-radius: 4px;
  background-color: black;
  position: absolute;
  top:110%;
  left: 29%;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s linear, visibility 0.2s linear;
}
/* 新增与JS切换逻辑匹配的显隐规则 */
.dropdown-list.active {
  opacity: 1;
  visibility: visible;
}

.dropdown-list_item{
  padding: 1rem;
  font-size: 1.4rem;
}
.dropdown-list_item:hover {
  background-color: #333;
}

修正后的HTML

<div id="wrapper">
  <div id="textbox">
    <div id="content">
      <h1 class="form">COMPLAINT TYPE</h1>
    </div>
    <div class="dropdown">
      <div class="dropdown-select">
        <span class="select">Selected Type</span>
        <i class="fas fa-angle-down"></i>
      </div>
      <div class="dropdown-list">
        <div class="dropdown-list_item">Drainage System Issue</div>
        <div class="dropdown-list_item">Garbage Collection</div>
        <div class="dropdown-list_item">Public Place Cleanliness</div>
        <div class="dropdown-list_item">Sweeping Of Roads</div>
        <div class="dropdown-list_item">Others</div>
      </div>
    </div>
  </div>
</div>

可选优化：可补充全局点击事件判断逻辑，当用户点击范围不在下拉组件内部时，主动移除下拉列表的active类，实现点击页面空白处自动收起下拉的交互效果。

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