选择下拉选择器选项后修改按钮href属性值的实现问题

问题根因 #

• <button> 属于表单按钮元素，HTML 原生规范没有定义 href 属性，你手动给按钮添加的 href 属于自定义属性，不会触发浏览器默认的跳转逻辑，所以直接修改 .href 属性无法实现点击跳转效果。

方案1：仅使用button元素实现（符合你的需求） #

通过自定义数据属性存储跳转链接，给按钮绑定点击事件实现跳转：

1. 修改下拉框change事件的逻辑，将选中的链接存入按钮的dataset自定义属性中：

select_1
    .on("change", function(d) {
    var value_1 = d3.select(this).property("value");
    document.querySelector('#botao-de-jogo-betfair-1').dataset.targetHref = value_1;
    });

2. 给按钮添加点击事件监听，点击时读取存储的链接打开新页面：

document.querySelector('#botao-de-jogo-betfair-1').addEventListener('click', function() {
    const href = this.dataset.targetHref;
    if (href) window.open(href, '_blank');
})

3. 对应button的HTML代码可以简化，无需额外加自定义的href、target属性：

<button class="button" style="width: 100%;" id="botao-de-jogo-betfair-1">Jogo Betfair 1</button>

方案2：用a标签模拟按钮（更符合HTML语义规范） #

跳转本身是链接的原生能力，你可以直接给a标签设置和按钮完全一致的样式，无需嵌套button也能实现相同的视觉效果，同时原生支持href修改：

<a class="button" style="width: 100%; display: inline-block; text-decoration: none; color: inherit;" id="botao-de-jogo-betfair-1" href="link selector" target="_blank">Jogo Betfair 1</a>

这种场景下你原来修改href的JS代码不需要做任何调整即可正常生效。

内容的提问来源于stack exchange，提问作者Digital Farmer