不修改doSomething方法签名，如何获取选中option的json参数调用该方法

这个需求很常见，我来给你几个靠谱的方案，既能保住doSomething(json)的签名不变，又能完美实现你要的功能：

方案一：使用标准的data-*自定义属性（推荐） #

HTML规范里建议用data-*前缀来定义自定义属性，这样兼容性更好，也更符合规范。具体步骤如下：

1. 编写HTML结构 #

给每个option添加data-json属性，注意用单引号包裹整个JSON字符串，内部属性名用双引号（符合JSON格式要求）：

<select onchange="handleSelectChange(this)">
  <option value="1" data-json='{"key": "json1"}'>name 1</option>
  <option value="2" data-json='{"key": "json2"}'>name 2</option>
</select>

2. 编写处理函数 #

写一个简单的处理函数，负责获取选中选项的JSON数据、解析后传给原方法，还能加个异常处理防止JSON格式错误：

function handleSelectChange(selectElement) {
  // 获取当前选中的选项
  const selectedOption = selectElement.options[selectElement.selectedIndex];
  // 取出data-json属性的字符串值
  const jsonString = selectedOption.getAttribute('data-json');
  
  try {
    // 把字符串解析成JSON对象
    const jsonData = JSON.parse(jsonString);
    // 调用你不能修改的原方法
    doSomething(jsonData);
  } catch (error) {
    console.error('JSON解析失败，请检查格式:', error);
  }
}

// 假设这是你已有的、不能修改签名的方法
function doSomething(json) {
  console.log('收到的JSON数据:', json);
}

方案二：直接在onchange内写逻辑（适合简单场景） #

如果不想额外写处理函数，也可以把逻辑直接写在onchange属性里，不过可读性稍差，容错性也弱一点：

<select onchange="
  const selectedOpt = this.options[this.selectedIndex];
  try {
    doSomething(JSON.parse(selectedOpt.getAttribute('data-json')));
  } catch(e) { console.error('JSON格式错误:', e) }
">
  <option value="1" data-json='{"key": "json1"}'>name 1</option>
  <option value="2" data-json='{"key": "json2"}'>name 2</option>
</select>

关键注意事项 #

• JSON格式必须正确：属性名必须用双引号，不能用单引号，否则JSON.parse会报错。如果你的JSON里有双引号，要转义成"（比如data-json='{"desc": "this is a "test""}'）。
• 为什么不用自定义的json属性？：虽然浏览器可能能识别非data-*的自定义属性，但这不符合HTML标准，而且在一些严格的解析场景下可能出问题，data-*是官方推荐的自定义属性方式，兼容性拉满。

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