业务网站开发：实现select选项按序逐步显示的技术咨询

第一步：统一调整HTML容器命名 #

为所有下拉选项补充独立的包裹容器，统一id命名规则，方便JS定位：

• 第1个canotto1下拉默认显示，无需特殊包裹
• 将原第2个下拉的外层div#mostra2统一修改为id="canotto-wrapper-2"
• 给第3-6个下拉的外层row容器分别添加id：canotto-wrapper-3、canotto-wrapper-4、canotto-wrapper-5、canotto-wrapper-6
• 所有<?php echo $opt->Canotti(); ?>生成的下拉选项，第一个必须为value=""的空占位项，作为“未选择”状态的判断依据

第二步：添加页面初始化逻辑 #

页面DOM加载完成后，默认隐藏第2-6个下拉的包裹容器：

window.addEventListener('DOMContentLoaded', () => {
  // 隐藏除第一个外的所有下拉容器
  for (let step = 2; step <=6; step++) {
    document.getElementById(`canotto-wrapper-${step}`).style.display = 'none';
  }
})

第三步：修改原有逻辑函数 #

在原有Canotto函数、EliminaCanotto函数中补充级联控制逻辑，原有AJAX请求、提示渲染的业务逻辑保持不变：

改造后的Canotto函数 #

function Canotto(str , can) {
  // 提取当前触发的下拉序号
  const currentStep = parseInt(can.replace('Canotto', ''));
  // 判断是否选中空值
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    // 隐藏当前下拉之后的所有下游选项，重置选中值
    for (let i = currentStep + 1; i <=6; i++) {
      const downWrapper = document.getElementById(`canotto-wrapper-${i}`);
      downWrapper.style.display = 'none';
      document.getElementById(`canotto${i}`).value = '';
    }
    return;
  }
  // 选中有效选项时，显示紧邻的下一个下拉容器
  const nextStep = currentStep + 1;
  if (nextStep <=6) {
    document.getElementById(`canotto-wrapper-${nextStep}`).style.display = 'block';
  }
  // 保留原有AJAX请求逻辑
  var id = <?php echo $_GET['id'] ?>;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xmlhttp.open("GET","Plenum_inserimentoCanotti.php?q=" + str + "&id=" + id + "&can=" + can ,true);
  xmlhttp.send();
}

改造后的EliminaCanotto函数 #

function EliminaCanotto(can) {
  const currentStep = parseInt(can.replace('Canotto', ''));
  // 清空当前下拉选中值
  document.getElementById(`canotto${currentStep}`).value = '';
  document.getElementById("txtHint").innerHTML = "";
  // 隐藏所有下游下拉、重置选中值
  for (let i = currentStep +1; i <=6; i++) {
    document.getElementById(`canotto-wrapper-${i}`).style.display = 'none';
    document.getElementById(`canotto${i}`).value = '';
  }
  // 保留原有删除业务的接口逻辑
}

注意事项 #

级联触发的判断以select的value是否为空值为依据，不要把占位空选项的value设为非空值，否则会出现初始加载就直接显示所有下拉的异常

内容的提问来源于stack exchange，提问作者Daniele Ronchi