寫了一個二級聯(lián)動的選擇下拉跳轉(zhuǎn)不同的鏈接
時間：2025-10-12 訪問量：0
這是以下代碼的效果，只是作為演示，當(dāng)然你需要自己去重新美化。
<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="">-- 選擇旅游項(xiàng)目--</option>
<option value="A1">游船 + 講解套餐 (拼團(tuán))</option>
<option value="A2">劍橋拼團(tuán)講解</option>
<option value="A3">劍橋私人包團(tuán)講解</option>
<option value="A4">劍橋共享康河游船</option>
<option value="A5">劍橋私人康河游船</option>
<option value="A6">游船 + 講解套餐 (私家包團(tuán))</option>
<option value="A7">共享劍橋?qū)W生深度講解 (3h)</option>
<option value="A8">私人劍橋?qū)W生深度講解 (3h)</option>
<option value="A9">共享牛津?qū)W生深度講解 (2h)</option>
<option value="A10">私人牛津?qū)W生深度講解 (2h)</option>
<option value="A11">Fitz 博物館劍橋</option>
</select>
</div>
<!-- 二級選擇 -->
<div class="xiadanbox my-3">
<select id="materialSelect" class="my-2 linkSelect">
<option value="">-- 選擇服務(wù)類型 --</option>
</select>
</div>
<!-- 跳轉(zhuǎn)按鈕 -->
<div onclick="goToLink()" class="bookbtn py-3 bgblue colorfff fs-20 fs-sm-24 mt-3">馬上預(yù)訂</div>
</div>
</div>
<script>
// 每個二級選項(xiàng)對應(yīng)固定鏈接
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": {
"私人包團(tuán)講解（1.5小時）": "https://www.example.com/booking/slm/316l",
"私人包團(tuán)講解（2小時）": "https://www.example.com/booking/slm/titanium",
"私家包團(tuán)（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": {
"私人包團(tuán)": "https://www.example.com/booking/fdm/abs"
},
"A7": {
"3小時劍橋?qū)W生深度講解（拼）": "https://www.example.com/booking/fdm/abs"
},
"A8": {
"3小時劍橋?qū)W生深度講解 （包團(tuán)）": "https://www.example.com/booking/fdm/abs"
},
"A9": {
"2小時牛津?qū)W生深度講解 （拼）": "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"
},
// 可以繼續(xù)添加其他
};
const techSelect = document.getElementById("techSelect");
const materialSelect = document.getElementById("materialSelect");
// 一級選擇改變時渲染二級
techSelect.addEventListener("change", () => {
const tech = techSelect.value;
materialSelect.innerHTML = '<option value="">-- 選擇服務(wù)類型 --</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);
});
}
});
// 跳轉(zhuǎn)按鈕
function goToLink() {
const url = materialSelect.value;
if(!techSelect.value || !url){
alert("請先選擇項(xiàng)目和類型");
return;
}
window.open(url, "_blank"); // 在新窗口打開鏈接
}
</script>比如美化成這樣：
