国产一区AV直播|精品高清无码一区二区|欧美人人操人人看|人妻另类视频亚洲午夜福利院|天堂一区二区三区玖玖|亚洲青草视频超碰97在线观|午夜黄色免费电影|欧美精品另类在线一区|97色色网在线亚洲AV专区一|亚洲自拍偷拍欧美

先看效果圖：

代碼如下：

<style>
/* 按鈕樣式 */
.option-group {margin:10px 0;}
.option-btn {
  display:inline-block;
  padding:6px 14px;
  margin:4px;
  border:1px solid #ccc;
  border-radius:6px;
  cursor:pointer;
  background:#f7f7f7;
  transition:all .2s;
}
.option-btn.active {
  background:#007bff;
  color:#fff;
  border-color:#007bff;
}
.option-btn.disabled {
  opacity:0.4;
  pointer-events:none;
}
</style>

 <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>

  <!-- 二級(jí)分類 -->
  <div class="option-group" id="material-group">
    <strong>Material:</strong><br>
    <!-- 二級(jí)按鈕通過(guò)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");

// 定義數(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 = "";

// 一級(jí)分類點(diǎn)擊
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 = "";

    // 生成對(duì)應(yīng)二級(jí)按鈕
    materialGroup.innerHTML = "<strong>Material:</strong><br>";
    materials[selectedTech].forEach(m=>{
      const span = document.createElement("span");
      span.className = "option-btn";
      span.textContent = m;
      span.dataset.material = m;
      materialGroup.appendChild(span);
    });
  }
});

// 二級(jí)分類點(diǎn)擊
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;
    }
  }
});
</script>