使用JavaScript实现自定义下拉选择器选中内容替换默认文本功能

实现方案 #

你需要在原有代码基础上补充两部分逻辑：CSS支持下拉框头部显示色标，JS同步选中的产品信息到头部。

第一步：补充CSS规则 #

给下拉框头部也添加和列表项一致的伪元素样式，用于显示选中产品的颜色图标：

/* 新增样式，让下拉框头部支持显示色标 */
.selectDropdown::before {
  height: 10px;
  width: 10px;
  content: "";
  display: inline-flex;
  margin: 0 10px;
}

第二步：修改JS点击事件 #

在产品项的点击监听逻辑里，补充同步选中信息到头部的代码：

var buttonSelector = document.querySelectorAll('li.product');
var selectDropdown = document.querySelector('.selectDropdown');
var toggleProduct = document.querySelector('ul');

buttonSelector.forEach(function(el) {
  el.addEventListener("click", function(ev) {
    buttonSelector.forEach(function(button) {
      button.classList.remove('activeProduct');
      // 先清除头部之前的产品类
      selectDropdown.classList.remove(button.classList[1]);
    });
    this.classList.add('activeProduct');
    
    // 同步产品类和文本到头部
    const currentProductClass = this.classList[1];
    selectDropdown.classList.add(currentProductClass);
    selectDropdown.textContent = this.textContent;
    
    // 选中后自动收起下拉列表（可选）
    toggleProduct.classList.remove("active");
    toggleProduct.classList.add("disable");
  });
});

// 下拉框展开收起逻辑可以简化为class切换
selectDropdown.addEventListener('click', function() {
  toggleProduct.classList.toggle("active");
  toggleProduct.classList.toggle("disable");
});

完整可运行整合代码 #

HTML

<div class="container">
  <div class="selectDropdown">Choose Option</div>
  <ul>
    <li class="product product1">Product 1</li>
    <li class="product product2">Product 2</li>
    <li class="product product3">Product 3</li>
    <li class="product product4">Product 4</li>
  </ul>
</div>

CSS

.selectDropdown {
  border: 1px solid black;
}
/* 头部色标样式 */
.selectDropdown::before {
  height: 10px;
  width: 10px;
  content: "";
  display: inline-flex;
  margin: 0 10px;
}

ul {
  max-height: 0;
  overflow: hidden;
  display: block;
  padding: 0;
}

li.product {
  list-style: none;
}

li.product::before {
  height: 10px;
  width: 10px;
  content: "";
  display: inline-flex;
  margin: 0 10px;
}

li.product.product1::before,
.selectDropdown.product1::before {
  background: yellow;
}

li.product.product2::before,
.selectDropdown.product2::before {
  background: pink;
}

li.product.product3::before,
.selectDropdown.product3::before {
  background: orange;
}

li.product.product4::before,
.selectDropdown.product4::before {
  background: red;
}

.activeProduct {
  background: yellow;
}

.active {
  max-height: 100%;
}

.disable {
  max-height: 0;
}

JS

var buttonSelector = document.querySelectorAll('li.product');
var selectDropdown = document.querySelector('.selectDropdown');
var toggleProduct = document.querySelector('ul');

buttonSelector.forEach(function(el) {
  el.addEventListener("click", function(ev) {
    buttonSelector.forEach(function(button) {
      button.classList.remove('activeProduct');
      selectDropdown.classList.remove(button.classList[1]);
    });
    this.classList.add('activeProduct');
    const productClass = this.classList[1];
    selectDropdown.classList.add(productClass);
    selectDropdown.textContent = this.textContent;
    toggleProduct.classList.remove("active");
    toggleProduct.classList.add("disable");
  });
});

selectDropdown.addEventListener('click', function() {
  toggleProduct.classList.toggle('active');
  toggleProduct.classList.toggle('disable');
});

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