多动态宽度Dropdown实现求助：无法为下拉分配独立宽度

问题概述 #

需要创建多个可嵌入文本的下拉框，每个下拉框能根据当前选中的选项自动调整宽度，但现有代码无法实现多个下拉框的宽度独立控制，所有下拉框会同步变化宽度。

原有代码 #

CSS #

:root {
  --dynamic-size: 20px;
  --arrow-size: 20px;
  --select-size: calc(var(--dynamic-size) + var(--arrow-size));
}

.resizing-select {
  width: var(--select-size);
}

.helper-element {
  position: absolute;
  top: 0;
  left: -9999px;
}

HTML #

<select id="resizing-select" class="resizing-select">
  <option>All</option>
  <option>books</option>
  <option>audiobooks</option>
  <option>Living and more</option>
</select>
<span class="helper-element" aria-hidden="true"></span>

<!-- 无法正常工作的下拉框 -->
<select id="resizing-select2" class="resizing-select">
  <option>All</option>
  <option>books</option>
  <option>audiobooks</option>
  <option>Living and more</option>
</select>
<span class="helper-element" aria-hidden="true"></span>

JavaScript #

const resizingSelect = document.querySelector(".resizing-select");
const helperElement = document.querySelector(".helper-element");
resizingSelect.addEventListener("change", initResize);

function initResize(event) {
  helperElement.innerHTML = event.target.querySelector(
    "option:checked"
  ).innerText;
  resize(helperElement.offsetWidth);
}

function resize(width) {
  const root = document.documentElement;
  root.style.setProperty("--dynamic-size", `${width}px`);
}

问题分析 #

1. 使用了全局CSS变量--dynamic-size，所有下拉框共用这个变量，导致一个下拉框宽度变化时，所有下拉框同步改变
2. 仅给第一个下拉框绑定了change事件，第二个下拉框无任何事件处理
3. 共用同一个helper元素，无法单独计算每个下拉框选中内容的宽度

修正后的完整代码 #

CSS #

/* 保留helper元素样式，去掉全局变量相关 */
.helper-element {
  position: absolute;
  top: 0;
  left: -9999px;
  /* 确保helper元素和下拉框字体样式一致，宽度计算准确 */
  font-family: inherit;
  font-size: inherit;
  padding: inherit;
  border: inherit;
}

.resizing-select {
  /* 初始宽度可以设为auto或者最小宽度 */
  min-width: 60px;
}

HTML #

<!-- 每个下拉框对应自己的helper元素，保持结构一致 -->
<select id="resizing-select" class="resizing-select">
  <option>All</option>
  <option>books</option>
  <option>audiobooks</option>
  <option>Living and more</option>
</select>
<span class="helper-element" aria-hidden="true"></span>

<select id="resizing-select2" class="resizing-select">
  <option>All</option>
  <option>books</option>
  <option>audiobooks</option>
  <option>Living and more</option>
</select>
<span class="helper-element" aria-hidden="true"></span>

<!-- 可以继续添加更多下拉框，保持同样的结构 -->
<select id="resizing-select3" class="resizing-select">
  <option>Small</option>
  <option>Medium Option</option>
  <option>Very Long Option Text for Testing</option>
</select>
<span class="helper-element" aria-hidden="true"></span>

JavaScript #

// 获取所有需要动态调整的下拉框
const allSelects = document.querySelectorAll(".resizing-select");

// 遍历每个下拉框，绑定事件并初始化宽度
allSelects.forEach(select => {
  // 找到当前下拉框对应的helper元素（紧接在select后面的兄弟元素）
  const helper = select.nextElementSibling;
  
  // 初始化：页面加载时就设置正确的宽度
  updateSelectWidth(select, helper);
  
  // 绑定change事件，选中选项变化时更新宽度
  select.addEventListener("change", () => {
    updateSelectWidth(select, helper);
  });
});

// 核心函数：计算并设置下拉框宽度
function updateSelectWidth(select, helper) {
  // 将当前选中的选项文本赋值给helper元素
  helper.textContent = select.options[select.selectedIndex].text;
  // 计算helper元素的宽度，加上下拉箭头的宽度（这里设为20px，可根据实际调整）
  const selectWidth = helper.offsetWidth + 20;
  // 直接设置当前下拉框的宽度
  select.style.width = `${selectWidth}px`;
}

关键改动说明 #

1. 去掉全局CSS变量：改为直接给每个下拉框设置style.width，实现宽度独立控制
2. 一对一绑定helper元素：每个下拉框对应自己的helper元素，确保宽度计算准确
3. 遍历所有下拉框：给每个下拉框绑定事件并初始化宽度，支持任意数量的下拉框
4. 同步字体样式：给helper元素设置和下拉框一致的字体样式，避免宽度计算偏差
5. 初始化宽度：页面加载时自动计算一次宽度，避免初始状态宽度异常

内容的提问来源于stack exchange，提问作者Autumn Jing Green