如何用JavaScript更新<option>标签的data-price属性值？

直接给你修改后的代码，实现实时更新ETH价格到指定option的data-price属性，页面刷新也会自动重新连接更新：

// 获取目标<option>元素
const ethOption = document.querySelector('option[value="ETH"]');

if (ethOption) {
  // 创建ETHUSDT的WebSocket连接
  const ethWs = new WebSocket('wss://stream.binance.com:9443/ws/ethusdt@trade');

  // 监听WebSocket消息
  ethWs.onmessage = (event) => {
    const tradeData = JSON.parse(event.data);
    // 解析价格并保留两位小数
    const ethPrice = parseFloat(tradeData.p).toFixed(2);
    // 更新data-price属性
    ethOption.dataset.price = ethPrice;
    // 如果需要同步更新option显示的文本，也可以加这行（根据你的需求调整）
    // ethOption.textContent = `Ethereum (${ethPrice} USDT)`;
  };

  // 可选：处理连接错误，避免断连后停止更新
  ethWs.onerror = (error) => {
    console.error('WebSocket连接出错:', error);
    // 可以在这里添加重连逻辑
  };

  // 可选：连接关闭后尝试重连
  ethWs.onclose = () => {
    console.log('WebSocket连接关闭，5秒后尝试重连');
    setTimeout(() => {
      window.location.reload(); // 简单的重连方式，或者重新初始化WebSocket
    }, 5000);
  };
} else {
  console.error('未找到value为ETH的option元素');
}

代码说明 #

• 用document.querySelector('option[value="ETH"]')精准定位目标option元素
• 把WebSocket连接地址改成ethusdt@trade，对应ETH/USDT的实时交易流
• 每次收到消息时，解析交易数据里的价格字段p，格式化后通过dataset.price更新属性（比setAttribute更简洁）
• 增加了错误处理和重连逻辑，避免网络波动导致更新中断
• 如果需要同时更新option显示的文字，取消注释那行代码即可

把这段代码放在页面的<script>标签里，或者外部JS文件中，确保在DOM加载完成后执行（可以放在DOMContentLoaded事件里，或者页面底部）。

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