JQ写了一个二级联动筛选功能

项目需求，客户有一个留言表单，需要用户在填写的时候，选择工艺和材质，不同的工艺下，材质不同，所以需要二级联运选择。

JQ写了一个二级联动筛选功能

实现的效果就是点击不同的工艺之后，下面出现不同的材质。然后可以选择不同的材质。

直接上代码：

<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");

// 定义数据
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 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 = "";

    // 渲染对应二级
    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写了一个二级联动筛选功能

然后我们再修改成下拉选择的二级联动试试。

先写一个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 动态填充选项 -->
    </select>
  </div>

  <!-- 二级分类 -->
  <div class="option-group" id="material-group">
    <label for="materialSelect"><strong>Material:</strong></label><br>
    <select id="materialSelect">
      <!-- JS 动态填充选项 -->
    </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");

// 数据定义
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>

除了选择之后，我们需要实现提交或者跳转。上面的功能基本上是为了提交表单用的。

下面我们需要跳转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>

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

  </div>
</div>

<script>
// 每个二级选项对应固定链接
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"
  }
  // 可以继续添加其他
};

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);
    });
  }
});

// 跳转按钮
function goToLink() {
  const url = materialSelect.value;
  if(!techSelect.value || !url){
    alert("请先选择 3D Technology 和 Material！");
    return;
  }
  window.open(url, "_blank"); // 在新窗口打开链接
}
</script>

</body>
</html>