如何使用数据属性在选择框中创建锚点

Question

从 select 框中选择一个选项时，我想创建一个锚点。以下工作正常：

<select class="form-select name" onchange="location = this.value;">
    <option value="Naam" selected>Naam</option>             
    <option class="" value="index.php?name=John">John</option>
    <option class="" value="index.php?name=Susan">Susan</option>
</select>

但我更喜欢将锚点与值分开。所以我认为这样的事情也应该有效，但不幸的是：

<select class="form-select name" onchange="location = this.attr.data-anchor;">
    <option value="Naam" selected>Naam</option>             
    <option class="" data-anchor="index.php?name=John" value="John">John</option>
    <option class="" data-anchor="index.php?name=Susan" value="Susan">Susan</option>    

</select>

有没有一种方法可以使用 data-anchor 之类的东西并使用 select 触发该值？

Answer 1

这应该有效：

<select class="form-select name" onchange="location = (this.selectedOptions[0].dataset.anchor);">
    <option value="Naam" selected>Naam</option>             
    <option class="" data-anchor="index.php?name=John" value="John">John</option>
    <option class="" data-anchor="index.php?name=Susan" value="Susan">Susan</option>    

</select>

如何使用数据属性在选择框中创建锚点

How to use data-attr to create an anchor in selectbox

javascript

select

onchange