先看效果图：

代码如下：

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

  <!-- 二级分类 -->
  <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 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 = "";

// 一级分类点击
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 = "";

    // 生成对应二级按钮
    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);
    });
  }
});

// 二级分类点击
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>