创建带跳转的下拉菜单遇阻：JavaScript跳转功能失效求助

问题诊断 #

你的组件跳转失效主要由以下几个问题导致：

• 元素ID不匹配：JavaScript中尝试获取ID为site的下拉框，但HTML里下拉框实际ID是standard-select，导致无法获取元素，后续逻辑完全无法执行。
• HTML结构非法：<select>标签内嵌套了<span>和<center>标签，不符合HTML规范（<select>的直接子元素只能是<option>或<optgroup>），会干扰组件正常功能。
• 未处理默认选项：默认选项value="NIL"没有对应的处理逻辑，用户选择该选项点击提交无任何反应。
• 变量声明不规范：JavaScript中value变量未使用let/const声明，存在全局变量污染风险。

修复步骤及完整代码 #

修复后的HTML（含内嵌CSS） #

<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}
select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  color:inherit;
  text-align: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
}
select::-ms-expand {
  display: none;
}
select {
  outline: none;
}
:root {
  --select-border: #FFF;
  --select-focus: blue;
  --select-arrow: #FFF;
}
.select {
  width: 100%;
  min-width: 15ch;
  max-width: 30ch;
  border: 5px solid white;
  border-radius: 0;
  padding: 20px 10px;
  font-size: 22px;
  text-align: left;
  color: #FFF;
  font-family: new-hero, sans-serif;
  font-weight: 800;
  line-height: normal;
  cursor: pointer;
  line-height: 1.1;
  position: relative;
  display: grid;
  grid-template-areas: "select";
  align-items: center;
}
.select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: #FFF;
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  grid-area: select;
  justify-self: end;
}
select,
.select:after {
  grid-area: select;
}
select:focus + .focus {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid #D22225;
  border-radius: inherit;
}
@import url("https://use.typekit.net/msr6mbn.css");
@font-face {
  font-family: new-hero, sans-serif;
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: new-hero, sans-serif;
  font-weight: 200;
  font-style: normal;
}
option {
  text-align: center;
  color: #FFF !important;
  font-family: new-hero, sans-serif;
  font-weight: 800;
  line-height: normal;
}
.cons_submit{
  border: 2px solid #FFF;
  background-color: transparent;
  padding: 20px 40px;
  color: white;
  font-size: 16px;
  font-family: new-hero, sans-serif;
  font-weight: 800;
  line-height: normal;
  text-align: center;
  float: left;
}
.cons_submit:hover{
  border: 2px solid #FFF;
  background-color: #FFF;
  color: black;
  cursor: pointer;
}
</style>
<center>
<div>
<center>
<div style="padding: 0px 50px 0px 50px">
<br>
<label for="standard-select"></label>
<div class="select">
  <select id="standard-select">
    <option value="NIL">SELECT HERE</option>
    <option value="FLITWICK">MID BEDFORDSHIRE</option>
    <option value="STEWARTBY">BEDFORD</option>
    <option value="FLITWICK">LUTON</option>
    <option value="FLITWICK">SOUTH WEST BEDFORDSHIRE</option>
    <option value="SHEFFORD">NORTH EAST BEDFORSHIRE</option>
    <option value="SHEFFORD">NORFOLK</option>
    <option value="SHEFFORD">ESSEX</option>
    <option value="FLITWICK">LONDON</option>
    <option value="SHEFFORD">HERTFORDSHIRE</option>
    <option value="STEWARTBY">SUFFOLK</option>
    <option value="STEWARTBY">CAMBRIDGESHIRE</option>
    <option value="FLITWICK">OXFORDSHIRE</option>
    <option value="STEWARTBY">BUCKINGHAMSHIRE</option>
    <option value="STEWARTBY">NORTHAMPTONSHIRE</option>
    <option value="FLITWICK">OTHER</option>
  </select>
  <span class="focus"></span>
</div>
<br>
<center>
<button class="cons_submit" type="button" id="button"><em>SUBMIT</em></button>
</center>
<script>
const select = document.getElementById('standard-select');
const button = document.getElementById("button");

button.onclick = function(){
    const value = select.value;
    if (value === "SHEFFORD") {
        window.location.href = "SHEFFORDLINK"; // 替换为实际目标链接
    } else if (value === "STEWARTBY") {
        window.location.href = "STEWARTBYLINK"; // 替换为实际目标链接
    } else if (value === "FLITWICK") {
        window.location.href = "FLITWICKLINK"; // 替换为实际目标链接
    } else if (value === "NIL") {
        alert("请选择一个有效区域");
    }
};
</script>
</div>
</center>
<br><br><br>
</div>
</center>

关键修复点说明 #

1. 修正ID匹配：将JS中获取下拉框的ID改为standard-select，与HTML元素ID一致。
2. 清理非法结构：移除<select>内部的<span>和<center>，将<span class="focus">移到<select>同级，符合CSS相邻兄弟选择器的要求。
3. 添加默认选项处理：增加对NIL值的判断，弹出提示引导用户选择有效选项。
4. 规范变量声明：使用const声明变量，避免全局污染。
5. 优化CSS结构：合并重复的.select样式规则，修正var变量的错误写法（原var #FFF改为直接写#FFF）。

内容的提问来源于stack exchange，提问作者Joseph Cox