在 HTML 中，`
方法一：使用自定义属性存储额外数据
一种常见的做法是利用 HTML 的 `data-` 自定义属性来存储额外的数据。这种方式不会破坏标准的语义，同时也能方便地通过 JavaScript 获取这些数据。
```html
<script>
// 获取 select 元素
const selectElement = document.getElementById('mySelect');
// 监听 change 事件
selectElement.addEventListener('change', function(event) {
// 获取选中的 option 元素
const selectedOption = event.target.options[event.target.selectedIndex];
// 获取自定义属性的值
const extraValue = selectedOption.getAttribute('data-extra-value');
console.log(`选中的值: ${selectedOption.value}, 额外值: ${extraValue}`);
});
</script>
```
在这个例子中，我们为每个 `
方法二：使用 JSON 字符串存储多个值
另一种方法是将多个值以 JSON 格式存储到 `value` 属性中。这种方式适合于需要传递复杂数据的情况。
```html
<script>
// 获取 select 元素
const selectElement = document.getElementById('mySelect');
// 监听 change 事件
selectElement.addEventListener('change', function(event) {
// 获取选中的 option 元素
const selectedOption = event.target.options[event.target.selectedIndex];
// 解析 JSON 数据
const parsedValue = JSON.parse(selectedOption.value);
console.log(`选中的主值: ${parsedValue.main}, 额外值: ${parsedValue.extra}`);
});
</script>
```
在这里，我们将多个值封装成一个 JSON 对象，并将其作为 `value` 属性的值。通过 JavaScript 的 `JSON.parse()` 方法，我们可以轻松解析出这些值并进行处理。
方法三：结合隐藏字段存储额外信息
如果需要更复杂的交互逻辑，可以考虑在表单中引入隐藏字段来存储额外信息。
```html
<script>
// 获取 select 元素和隐藏字段
const selectElement = document.getElementById('mySelect');
const hiddenField = document.getElementById('hiddenField');
// 监听 change 事件
selectElement.addEventListener('change', function(event) {
// 获取选中的 option 元素
const selectedOption = event.target.options[event.target.selectedIndex];
// 设置隐藏字段的值
hiddenField.value = selectedOption.getAttribute('data-hidden-value');
});
</script>
```
这种方法适用于需要在服务器端处理额外信息的场景，隐藏字段可以作为表单的一部分被提交。
总结
尽管 HTML 的 `
