自定义选择框（Custom Select Box）添加跳转链接功能故障求助

我懂你这种困扰——那个自定义选择框的样式确实很实用，但没法直接跳转网址真的挺闹心的。其实只需要修改一下JavaScript部分的逻辑，就能让它实现点击选项跳转的功能，咱们一步步来：

1. 给下拉选项配置目标网址 #

首先，把原生<select>里的选项value改成你要跳转的目标网址，比如：

<div class="custom-select">
  <select>
    <option value="https://example.com">跳转到示例网站</option>
    <option value="https://test.com">跳转到测试网站</option>
    <option value="https://demo.com">跳转到演示网站</option>
  </select>
</div>

如果不想把网址存在value里，也可以用data-url属性，比如<option data-url="https://example.com">...</option>，后面JS对应调整就行。

2. 修改JavaScript的点击事件逻辑 #

原W3Schools的JS代码只是实现了样式切换和选中状态更新，咱们需要在选项的点击事件里加上跳转的代码。找到原代码中选项点击事件的部分，在h.click();后面新增跳转逻辑：

c.addEventListener("click", function(e) {
    // 原有的选中状态更新代码保持不变
    var y, i, k, s, h, sl, yl;
    s = this.parentNode.parentNode.getElementsByTagName("select")[0];
    sl = s.length;
    h = this.parentNode.previousSibling;
    for (i = 0; i < sl; i++) {
      if (s.options[i].innerHTML == this.innerHTML) {
        s.selectedIndex = i;
        h.innerHTML = this.innerHTML;
        y = this.parentNode.getElementsByClassName("same-as-selected");
        yl = y.length;
        for (k = 0; k < yl; k++) {
          y[k].removeAttribute("class");
        }
        this.setAttribute("class", "same-as-selected");
        break;
      }
    }
    h.click();
    
    // 新增跳转逻辑：获取选中选项的网址并跳转
    var targetUrl = s.options[s.selectedIndex].value;
    // 如果用的是data-url属性，就改成下面这句：
    // var targetUrl = s.options[s.selectedIndex].getAttribute('data-url');
    
    if (targetUrl) {
        // 当前窗口跳转
        window.location.href = targetUrl;
        // 若要在新窗口打开，替换成这句：
        // window.open(targetUrl, '_blank');
    }
});

3. 验证效果 #

保存修改后刷新页面，点击自定义选择框的选项，就能正常跳转到目标网址啦！原有的CSS样式不需要任何改动，完全保留原来的自定义外观。

内容的提问来源于stack exchange，提问作者Sheju Sathyanesan