Bootstrap环境下分页排序中Option内Anchor标签不显示问题

嘿，这问题我太熟了！你遇到的核心问题是HTML规范明确禁止在<option>标签里嵌套<a>这类交互式元素——浏览器在解析页面时会自动把<option>内部的<a>标签剥离掉，所以你在元素审查里看不到它，自然也没法实现点击跳转的功能。

既然你用了Bootstrap，给你两个靠谱的解决方案：

方案一：用Bootstrap Dropdown组件替代Select（推荐） #

Bootstrap的Dropdown组件天生就是用来做这种带跳转的选择菜单的，比原生Select更灵活，还能和Bootstrap的整体风格统一：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="sortDropdown" data-bs-toggle="dropdown" aria-expanded="false">
    Select
  </button>
  <ul class="dropdown-menu" aria-labelledby="sortDropdown">
    <li><a class="dropdown-item" href="shop.php?sort=1">Relevance</a></li>
    <li><a class="dropdown-item" href="<?php echo $_SERVER['PHP_SELF'] . "?sort=2"; ?>">Name, A to Z</a></li>
    <li><a class="dropdown-item" href="<?php echo $_SERVER['PHP_SELF'] . "?sort=3"; ?>">Name, Z to A</a></li>
    <li><a class="dropdown-item" href="<?php echo $_SERVER['PHP_SELF'] . "?sort=4"; ?>">Price, low to high</a></li>
    <li><a class="dropdown-item" href="<?php echo $_SERVER['PHP_SELF'] . "?sort=5"; ?>">Price, high to low</a></li>
  </ul>
</div>

这个方案不需要额外写JavaScript，直接利用Bootstrap的内置功能就能实现点击跳转，体验也更流畅。

方案二：给原生Select加JS跳转逻辑 #

如果你坚持要保留原生Select的样式，那可以把跳转地址存在<option>的data-href属性里，再用JavaScript监听选择事件来实现跳转：

<select class="wide" id="sortSelect">
  <option data-display="Select">Nothing</option>
  <option value="Relevance" data-href="shop.php?sort=1">Relevance</option>
  <option value="Name, A to Z" data-href="<?php echo $_SERVER['PHP_SELF'] . "?sort=2"; ?>">Name, A to Z</option>
  <option value="Name, Z to A" data-href="<?php echo $_SERVER['PHP_SELF'] . "?sort=3"; ?>">Name, Z to A</option>
  <option value="Price, low to high" data-href="<?php echo $_SERVER['PHP_SELF'] . "?sort=4"; ?>">Price, low to high</option>
  <option value="Price, high to low" data-href="<?php echo $_SERVER['PHP_SELF'] . "?sort=5"; ?>">Price, high to low</option>
</select>

<script>
document.getElementById('sortSelect').addEventListener('change', function() {
  const targetHref = this.options[this.selectedIndex].dataset.href;
  if (targetHref) {
    window.location.href = targetHref;
  }
});
</script>

这种方式保留了原生Select的外观，通过简单的JS逻辑实现了跳转需求，也能满足你的分页排序功能。

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