如何使用 data-attr 在选择框中创建锚点

Question

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

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