如何基于自定义Select组件同步更新原生HTML Select标签的值？

嘿，我仔细看了你的代码，发现问题的核心其实很简单——你在setSelected函数里给错误的元素赋值了！咱们一步步来修复：

问题根源 #

你的createCustomDropdown函数接收的dropdown参数是.select-menu这个容器div，而不是里面的原生<select>元素。所以原来的dropdown.value = value其实是在给div设置value属性（div根本没有这个原生属性），完全没触碰到真正的原生select，这就是表单提交拿不到值的原因。

修复步骤 #

1. 在创建自定义Dropdown时，先获取原生Select元素 #

在createCustomDropdown函数开头，先从容器里拿到真正的原生select：

function createCustomDropdown(dropdown) {
  // 新增：获取容器内的原生select元素
  const nativeSelect = dropdown.querySelector('select');
  // ... 保留原来的其他代码（获取options、创建customDropdown等）

2. 绑定点击事件时传入原生Select #

在循环创建自定义选项并绑定点击事件时，把nativeSelect作为参数传给setSelected：

optionsArr.forEach(option => {
  const item = document.createElement('div');
  item.classList.add('dropdown__menu_item');
  item.dataset.value = option.value;
  item.textContent = option.textContent;
  menuItemsWrapper.appendChild(item);
  // 修改这里：把nativeSelect传进去，替换原来的dropdown
  item.addEventListener('click', setSelected.bind(item, selected, nativeSelect, menu));
});

3. 修改setSelected函数，同步原生Select的值 #

更新setSelected函数的参数，把赋值对象改成原生select：

function setSelected(selected, nativeSelect, menu) {
  const value = this.dataset.value;
  const label = this.textContent;
  
  // 更新自定义选中项的文本
  selected.textContent = label;
  // 关键：给原生select赋值，这样表单就能拿到正确的值了！
  nativeSelect.value = value;
  
  // ... 保留原来的其他代码（关闭菜单、重置搜索、更新选中样式等）
}

4. 隐藏原生Select（可选但推荐） #

打开你注释掉的代码，把原生select隐藏起来，避免用户看到两个选择器：

// 取消注释这行，隐藏原生select
nativeSelect.style.display = 'none';

验证效果 #

现在点击自定义Dropdown的选项时，原生select的value会同步更新，表单提交时就能正确获取到选中的product值了，和你给出的invoice与taxes联动示例原理一致——都是当触发事件时，把目标值同步到需要联动的表单元素上。

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