Select 选项可以有多个值吗？

Question

我想知道是否有可能在 Select 选项具有 2 个不同值的代码（这会影响 2 个不同的东西）

基本上，我正在尝试创建一个选项，根据 select 的选择，它会更改价格并更改按下按钮将 go 到的链接。

我在这里的一个帖子上找到了这段代码，它运行良好，但我希望在 select 菜单和也受 select 选择影响的按钮之间添加一个价格。

例如。

仅 1 年 - 50 美元 [按钮链接到正确的购买链接]

订阅（按年计费）- 45 美元/年 [按钮链接到正确的购买链接]

对不起，如果我没有很好地解释它。

<select id="menu">
<option selected="selected" disabled="">Please choose an option</option>
<option value="https://checkout-1-year">1 Year</option>
<option value="https://checkout-subscription">Subscription (Billed Annually)</option>
</select>

<input type="button" id="goBtn" value="Purchase">

<script type="text/javascript">
var goBtn = document.getElementById("goBtn");
var menu = document.getElementById("menu");

goBtn.onclick = function() {
window.location = menu.value;
}
</script>

Answer 1

它们不能有两个值，但您可以设置value和data-属性，它可以存储您喜欢的任何字符串，然后使用data-* 属性 API检索。

这是一个例子：

 const list = document.getElementById("menu"); console.log(list.options[1].value, list.options[1].dataset.value); console.log(list.options[2].value, list.options[2].dataset.value);

 <select id="menu"> <option selected="selected" disabled="">Please choose an option</option> <option value="https://checkout-1-year" data-value="something">1 Year</option> <option value="https://checkout-subscription" data-value="something else">Subscription (Billed Annually)</option> </select>