Select 选项可以有多个值吗？

Question

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

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

我在此处的其中一篇帖子中找到了这段代码，它运行良好，但我希望在 select 菜单和按钮之间添加一个价格，该按钮也受 select选择.

例如

仅限 1 年 - 50 美元[按钮 links 以更正购买 link]

订阅（按年计费）- 45 美元/年 [按钮 links 以更正购买 link]

对不起，如果我解释得不是很好。

<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-* Attribute 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>

Select 选项可以有多个值吗？

Can Select options have Multiple Values?

html

javascript

wordpress

elementor