二级联动的选择下拉跳转不同的链接

这是以下代码的效果，只是作为演示，当然你需要自己去重新美化。
<style>
/* 下拉美化 */
.linkSelect {
  width: 100%;
  max-width: 400px;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='70,100 30,40 110,40' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
}
.linkSelect:hover { border-color: #888; }
.linkSelect:focus { outline: none; border-color: #007BFF; box-shadow: 0 0 5px rgba(0,123,255,0.3); }

/* 按钮美化 */
.bookbtn {
  display: inline-block;
  padding: 12px 25px;
  background-color: #007BFF;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.bookbtn:hover {
  background-color: #0056b3;
}
</style>

</head>
<body>
  <div class="container-fluid container-fluid-body">
  <div class="w-100 text-center">

    <!-- 一级选择 -->
    <div class="xiadanbox my-3">
     
      <select id="techSelect" class="my-2 linkSelect">
        <option value="">-- 选择旅游项目--</option>
        <option value="A1">游船 + 讲解套餐 (拼团)</option>
        <option value="A2">剑桥拼团讲解</option>
        <option value="A3">剑桥私人包团讲解</option>
        <option value="A4">剑桥共享康河游船</option>
        <option value="A5">剑桥私人康河游船</option>
        <option value="A6">游船 + 讲解套餐 (私家包团)</option>
        <option value="A7">共享剑桥学生深度讲解 (3h)</option>
        <option value="A8">私人剑桥学生深度讲解 (3h)</option>
        <option value="A9">共享牛津学生深度讲解 (2h)</option>
        <option value="A10">私人牛津学生深度讲解 (2h)</option>
        <option value="A11">Fitz 博物馆剑桥</option>
      </select>
    </div>

    <!-- 二级选择 -->
    <div class="xiadanbox my-3">  
      <select id="materialSelect" class="my-2 linkSelect">
        <option value="">-- 选择服务类型 --</option>
      </select>
    </div>

    <!-- 跳转按钮 -->
    <div onclick="goToLink()" class="bookbtn py-3 bgblue colorfff fs-20 fs-sm-24 mt-3">马上预订</div>

  </div>
</div>

<script>
// 每个二级选项对应固定链接
const materials = {
  "A1": {
    "11:00 讲解 + 13:00 游船": "https://www.example.com/booking/sla/9600",
    "11:00 讲解 + 14:00 游船": "https://www.example.com/booking/sla/black",
    "11:00 讲解 + 15:00 游船": "https://www.example.com/booking/sla/imagineblack",
    "11:00 讲解 + 16:00 游船": "https://www.example.com/booking/sla/8228",
    "13:00 讲解 + 14:00 游船": "https://www.example.com/booking/sla/9600",
    "13:00 讲解 + 15:00游船": "https://www.example.com/booking/sla/black",
    "13:00 讲解 + 16:00 游船": "https://www.example.com/booking/sla/imagineblack",
    "15:00 讲解 + 17:00 游船": "https://www.example.com/booking/sla/8228"
  },
  "A2": {
    "中文讲解（拼）": "https://www.example.com/booking/mjf/pa12",
    "英文讲解（拼）": "https://www.example.com/booking/mjf/pac"
  },
  "A3": {
    "私人包团讲解（1.5小时）": "https://www.example.com/booking/slm/316l",
    "私人包团讲解（2小时）": "https://www.example.com/booking/slm/titanium",
    "私家包团（1小时）": "https://www.example.com/booking/slm/titanium"
  },
  "A4": {
    "康河游船（拼）": "https://www.example.com/booking/fdm/abs"
  },
   "A5": {
    "康河游船（包）": "https://www.example.com/booking/fdm/abs"
  },
   "A6": {
    "私人包团": "https://www.example.com/booking/fdm/abs"
  },
   "A7": {
    "3小时剑桥学生深度讲解（拼）": "https://www.example.com/booking/fdm/abs"
  },
   "A8": {
    "3小时剑桥学生深度讲解 （包团）": "https://www.example.com/booking/fdm/abs"
  },
   "A9": {
    "2小时牛津学生深度讲解 （拼）": "https://www.example.com/booking/fdm/abs"
  },
   "A10": {
    "Oxford Student Guided Tour (private)": "https://www.example.com/booking/fdm/abs"
  },
   "A11": {
    "Fitz 博物馆剑桥": "https://www.example.com/booking/fdm/abs"
  },
  // 可以继续添加其他
};

const techSelect = document.getElementById("techSelect");
const materialSelect = document.getElementById("materialSelect");

// 一级选择改变时渲染二级
techSelect.addEventListener("change", () => {
  const tech = techSelect.value;
  materialSelect.innerHTML = '<option value="">-- 选择服务类型 --</option>';

  if(materials[tech]){
    Object.entries(materials[tech]).forEach(([materialName, link]) => {
      const option = document.createElement("option");
      option.value = link; // 直接把链接存到 value
      option.textContent = materialName;
      materialSelect.appendChild(option);
    });
  }
});

// 跳转按钮
function goToLink() {
  const url = materialSelect.value;
  if(!techSelect.value || !url){
    alert("请先选择项目和类型");
    return;
  }
  window.open(url, "_blank"); // 在新窗口打开链接
}
</script>
比如美化成这样：
二级联动的选择下拉跳转不同的链接