亚洲成AV人片香蕉片,丁香五月婷国产剧情天美,裸体美女视频网站一区二区

項目需求，客戶有一個留言表單，需要用戶在填寫的時候，選擇工藝和材質(zhì)，不同的工藝下，材質(zhì)不同，所以需要二級聯(lián)運選擇。

JQ寫了一個二級聯(lián)動篩選功能

實現(xiàn)的效果就是點擊不同的工藝之后，下面出現(xiàn)不同的材質(zhì)。然后可以選擇不同的材質(zhì)。

直接上代碼：

<div class="option-group" id="tech-group">
    <strong>3D Technology:</strong><br>
    <span class="option-btn" data-tech="SLA(Resin)">SLA(Resin)</span>
    <span class="option-btn" data-tech="MJF(Nylon)">MJF(Nylon)</span>
    <span class="option-btn" data-tech="SLM(Metal)">SLM(Metal)</span>
    <span class="option-btn" data-tech="FDM(Plastic)">FDM(Plastic)</span>
    <span class="option-btn" data-tech="SLS(Nylon)">SLS(Nylon)</span>
    <span class="option-btn" data-tech="WJP(Resin)">WJP(Resin)</span>
    <span class="option-btn" data-tech="BJ(Metal)">BJ(Metal)</span>              

</div>

  <!-- 二級分類 -->
  <div class="option-group" id="material-group">
    <strong>Material:</strong><br>
    <!-- 二級按鈕通過JS控制顯示 -->
  </div>

  <!-- 隱藏提交字段 -->
  <input type="hidden" name="caizhi" id="caizhi">

      <script>
const techGroup = document.getElementById("tech-group");
const materialGroup = document.getElementById("material-group");
const caizhiInput = document.getElementById("caizhi");
const myForm = document.getElementById("myForm");

// 定義數(shù)據(jù)
const materials = {
  "SLA(Resin)": ["9600 Resin","Black Resin","Imagine Black","8228 Resin","LEDO 6060 Resin","8001 Resin","CBY Resin","X Resin","JLC Black Resin","Grey Resin","JLC Temp Resin"],
  "MJF(Nylon)": ["PA12-HP Nylon","PAC-HP Nylon","PA11-HP Nylon"],
  "SLM(Metal)": ["316L","Titanium TC4"],
  "FDM(Plastic)": ["ABS","PLA","ASA","PA12-CF"],
  "SLS(Nylon)": ["3201PA-F Nylon","1172Pro Nylon","3301PA Nylon"],
  "WJP(Resin)": ["Full Color Resin"],
  "BJ(Metal)": ["BJ-316L"]
};

let selectedTech = "";
let selectedMaterial = "";

// 渲染二級按鈕函數(shù)
function renderMaterials(tech){
  materialGroup.innerHTML = "<strong>Material:</strong><br>";
  materials[tech].forEach((m,idx)=>{
    const span = document.createElement("span");
    span.className = "option-btn";
    span.textContent = m;
    span.dataset.material = m;
    materialGroup.appendChild(span);
    // 默認選中第一個
    if(idx===0){
      span.classList.add("active");
      selectedMaterial = m;
    }
  });
}

// 一級分類點擊
techGroup.addEventListener("click", e=>{
  if(e.target.classList.contains("option-btn")){
    // 高亮
    [...techGroup.querySelectorAll(".option-btn")].forEach(btn=>btn.classList.remove("active"));
    e.target.classList.add("active");
    selectedTech = e.target.dataset.tech;
    selectedMaterial = "";
    caizhiInput.value = "";

    // 渲染對應(yīng)二級
    renderMaterials(selectedTech);
  }
});

// 二級分類點擊
materialGroup.addEventListener("click", e=>{
  if(e.target.classList.contains("option-btn")){
    [...materialGroup.querySelectorAll(".option-btn")].forEach(btn=>btn.classList.remove("active"));
    e.target.classList.add("active");
    selectedMaterial = e.target.dataset.material;
    if(selectedTech && selectedMaterial){
      caizhiInput.value = selectedTech + "---" + selectedMaterial;
    }
  }
});

// 表單提交驗證
myForm.addEventListener("submit", e=>{
  if(!selectedTech || !selectedMaterial){
    alert("請先選擇 3D Technology 和 Material！");
    e.preventDefault();
    return;
  }
  caizhiInput.value = selectedTech + "---" + selectedMaterial;
});

// 頁面加載時默認顯示第一組
window.addEventListener("DOMContentLoaded", ()=>{
  const firstTechBtn = techGroup.querySelector(".option-btn");
  if(firstTechBtn){
    firstTechBtn.classList.add("active");
    selectedTech = firstTechBtn.dataset.tech;
    renderMaterials(selectedTech);
  }
});
</script>

JQ寫了一個二級聯(lián)動篩選功能

然后我們再修改成下拉選擇的二級聯(lián)動試試。

先寫一個CSS:

<style>
/* 整體布局 */
.option-group {
  margin-bottom: 20px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.option-group strong {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  color: #333;
}

/* 下拉選擇美化 */
select {
  width: 100%;
  max-width: 400px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  color: #333;
  appearance: none; /* 去掉默認箭頭 */
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* hover / focus 效果 */
select:hover {
  border-color: #888;
}
select:focus {
  outline: none;
  border-color: #007BFF;
  box-shadow: 0 0 5px rgba(0,123,255,0.3);
}

/* 自定義下拉箭頭 */
select {
  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 10px center;
  background-size: 12px;
}

/* 提交按鈕美化 */
button[type="submit"] {
  padding: 10px 20px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

button[type="submit"]:hover {
  background-color: #0056b3;
}
</style>

下面是HTML和JS

 <div id="myForm">
  <!-- 一級分類 -->
  <div class="option-group" id="tech-group">
    <label for="techSelect"><strong>3D Technology:</strong></label><br>
    <select id="techSelect">
      <!-- JS 動態(tài)填充選項 -->
    </select>
  </div>

  <!-- 二級分類 -->
  <div class="option-group" id="material-group">
    <label for="materialSelect"><strong>Material:</strong></label><br>
    <select id="materialSelect">
      <!-- JS 動態(tài)填充選項 -->
    </select>
  </div>

  <!-- 隱藏提交字段 -->
  <input type="hidden" name="caizhi" id="caizhi">

 
</div>

<script>
const techSelect = document.getElementById("techSelect");
const materialSelect = document.getElementById("materialSelect");
const caizhiInput = document.getElementById("caizhi");
const myForm = document.getElementById("myForm");

// 數(shù)據(jù)定義
const materials = {
  "SLA(Resin)": ["9600 Resin","Black Resin","Imagine Black","8228 Resin","LEDO 6060 Resin","8001 Resin","CBY Resin","X Resin","JLC Black Resin","Grey Resin","JLC Temp Resin"],
  "MJF(Nylon)": ["PA12-HP Nylon","PAC-HP Nylon","PA11-HP Nylon"],
  "SLM(Metal)": ["316L","Titanium TC4"],
  "FDM(Plastic)": ["ABS","PLA","ASA","PA12-CF"],
  "SLS(Nylon)": ["3201PA-F Nylon","1172Pro Nylon","3301PA Nylon"],
  "WJP(Resin)": ["Full Color Resin"],
  "BJ(Metal)": ["BJ-316L"]
};

let selectedTech = "";
let selectedMaterial = "";

// 渲染一級選項
function renderTechOptions(){
  Object.keys(materials).forEach(tech => {
    const opt = document.createElement("option");
    opt.value = tech;
    opt.textContent = tech;
    techSelect.appendChild(opt);
  });
}

// 渲染二級選項
function renderMaterialOptions(tech){
  materialSelect.innerHTML = "";
  materials[tech].forEach((m, idx) => {
    const opt = document.createElement("option");
    opt.value = m;
    opt.textContent = m;
    materialSelect.appendChild(opt);
    if(idx === 0){
      selectedMaterial = m;
      caizhiInput.value = tech + "---" + m;
    }
  });
}

// 一級選擇變化
techSelect.addEventListener("change", e => {
  selectedTech = e.target.value;
  renderMaterialOptions(selectedTech);
});

// 二級選擇變化
materialSelect.addEventListener("change", e => {
  selectedMaterial = e.target.value;
  if(selectedTech && selectedMaterial){
    caizhiInput.value = selectedTech + "---" + selectedMaterial;
  }
});

// 表單提交驗證
myForm.addEventListener("submit", e => {
  if(!selectedTech || !selectedMaterial){
    alert("請先選擇 3D Technology 和 Material！");
    e.preventDefault();
    return;
  }
  caizhiInput.value = selectedTech + "---" + selectedMaterial;
});

// 頁面加載初始化
window.addEventListener("DOMContentLoaded", () => {
  renderTechOptions();
  // 默認選中第一個
  selectedTech = techSelect.options[0].value;
  techSelect.value = selectedTech;
  renderMaterialOptions(selectedTech);
});
</script>

除了選擇之后，我們需要實現(xiàn)提交或者跳轉(zhuǎn)。上面的功能基本上是為了提交表單用的。

下面我們需要跳轉(zhuǎn)URL，要如何修改代碼呢。

以下是一個演示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  
<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">
      <div class="fs-20 fs-sm-24 mb-2">請選擇 3D Technology</div>
      <select id="techSelect" class="my-2 linkSelect">
        <option value="">-- 請選擇 3D Technology --</option>
        <option value="SLA(Resin)">SLA(Resin)</option>
        <option value="MJF(Nylon)">MJF(Nylon)</option>
        <option value="SLM(Metal)">SLM(Metal)</option>
        <option value="FDM(Plastic)">FDM(Plastic)</option>
        <option value="SLS(Nylon)">SLS(Nylon)</option>
        <option value="WJP(Resin)">WJP(Resin)</option>
        <option value="BJ(Metal)">BJ(Metal)</option>
      </select>
    </div>

    <!-- 二級選擇 -->
    <div class="xiadanbox my-3">
      <div class="fs-20 fs-sm-24 mb-2">請選擇 Material</div>
      <select id="materialSelect" class="my-2 linkSelect">
        <option value="">-- 請選擇 Material --</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>
// 每個二級選項對應(yīng)固定鏈接
const materials = {
  "SLA(Resin)": {
    "9600 Resin": "https://www.example.com/booking/sla/9600",
    "Black Resin": "https://www.example.com/booking/sla/black",
    "Imagine Black": "https://www.example.com/booking/sla/imagineblack",
    "8228 Resin": "https://www.example.com/booking/sla/8228"
  },
  "MJF(Nylon)": {
    "PA12-HP Nylon": "https://www.example.com/booking/mjf/pa12",
    "PAC-HP Nylon": "https://www.example.com/booking/mjf/pac",
    "PA11-HP Nylon": "https://www.example.com/booking/mjf/pa11"
  },
  "SLM(Metal)": {
    "316L": "https://www.example.com/booking/slm/316l",
    "Titanium TC4": "https://www.example.com/booking/slm/titanium"
  },
  "FDM(Plastic)": {
    "ABS": "https://www.example.com/booking/fdm/abs",
    "PLA": "https://www.example.com/booking/fdm/pla",
    "ASA": "https://www.example.com/booking/fdm/asa",
    "PA12-CF": "https://www.example.com/booking/fdm/pa12cf"
  }
  // 可以繼續(xù)添加其他
};

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

// 一級選擇改變時渲染二級
techSelect.addEventListener("change", () => {
  const tech = techSelect.value;
  materialSelect.innerHTML = '<option value="">-- 請選擇 Material --</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("請先選擇 3D Technology 和 Material！");
    return;
  }
  window.open(url, "_blank"); // 在新窗口打開鏈接
}
</script>

</body>
</html>