用select+data属性实现多仓库发货地切换，需后端返回含warehouse_list的SKU数据，前端渲染时用data-warehouse-id和data-stock绑定真实库存，仅显示有货选项，并在change事件中解析dataset实时更新运费、发货时间及按钮状态，同时加购时携带warehouse_id供后端强校验库存。
怎么用 select + 数据属性实现多仓库发货地切换
直接改 DOM 节点比重载页面更轻量，也更容易和现有商品详情页融合。关键不是“做下拉框”，而是让每个 <select></select> 选项对应一组真实可发货的仓库 ID 和库存状态。
实操建议：
- 后端接口返回的 SKU 数据里必须带
warehouse_list字段，每个子项含id、name、stock、shipping_days（预计发货天数） - 前端渲染
<select></select>时，用data-warehouse-id存 ID，data-stock存实时库存，避免后续再查数组 - 不要把所有仓库都塞进下拉——只显示
stock > 0的，否则用户选了没货的仓库，体验断层
<select id="warehouse-select"> <option value="" disabled selected>请选择发货仓库</option> <option data-warehouse-id="wh-sh" data-stock="12">上海仓（12件，1天发货）</option> <option data-warehouse-id="wh-gz" data-stock="0">广州仓（缺货）</option> </select>
切换时怎么同步更新运费、发货时间、库存文案
用户选完仓库，页面不能只改个文字，得联动三个关键信息：运费计算逻辑、预计发货时间、加入购物车按钮状态。这些都得从当前选中 <option></option> 的 dataset 里实时读，而不是靠全局变量或重新请求。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 点了广州仓，运费还是按上海仓算——因为没监听
change事件，或事件回调里没取对event.target.selectedOptions[0].dataset - 库存文案写成“仅剩
stock件”，但stock是字符串，比较时出错（比如"0" > 0是false，但"0" == 0是true） - 没禁用“加入购物车”按钮，用户点了才发现库存为 0，后端返回
400 {"error": "out_of_stock"}
实操建议：
- 在
change回调里统一调用一个updateShippingUI(warehouseData)函数，把所有 UI 更新逻辑收口 - 用
parseInt(option.dataset.stock, 10)转数字，再判断是否可购买 - 运费如果依赖地区，把用户收货地址字段也传进去，别硬编码“默认包邮”
为什么不能只靠前端判断库存，还得校验后端
前端展示的库存是快照，不是锁住的资源。两个用户同时选中同一个仓库下单，前端看到都是 “12 件”，但后端扣减时必然有一个会失败。所以前端乐观展示 + 后端强校验，才是可靠路径。
实操建议：
- 加购接口必须携带
warehouse_id参数，后端按该仓库查实时库存并扣减 - 不要在前端隐藏“缺货”仓库选项，而要用
disabled+ 灰色文案，让用户知道“不是没了，是暂时没货” - 如果后端返回
409 Conflict（库存不足），前端要原样提示“该仓库当前库存不足，请换其他仓库”，而不是跳转回首页或清空选择
响应式下拉和移动端适配要注意什么
PC 上用原生 <select></select> 没问题，但 iOS Safari 对 select 样式限制极严，Android 各厂商 Webview 表现也不一致。强行 CSS 改样式容易失效，反而增加维护成本。
实操建议：
- 移动端优先用自定义弹层（
div+ul/li），但保持和原生select相同的 ARIA 属性（如role="combobox"、aria-expanded），保无障碍 - 别用
click绑定下拉展开——移动端要监听touchstart，且加{ passive: false }防止被浏览器忽略 - 仓库列表过长（比如 >8 项）时，加搜索框，但搜索逻辑必须走前端过滤，别每输一个字就发请求
复杂点在于：不同仓库可能对应不同物流商、不同打包规则、甚至不同发票资质。这些信息虽不直接展示，但得在提交订单前完成校验。别等到结算页才报错。
