html 下拉框 需求单名称 单选框<div class="form-group"> <label class="col-sm-2 control-label">检查员类别：</label> <div class="col-sm-9"> <div class="radio-box" th:each="dict : ${@dict.getType('xqd_jcy_lb')}"> <input type="radio" th:id="${'fenlei_' + dict.dictCode}" name="fenlei" th:value="${dict.dictValue}" th:checked="${dict.default}"> <label th:for="${'fenlei_' + dict.dictCode}" th:text="${dict.dictLabel}"></label> </div> </div> </div> 二级联动。 需求单名称为1,检查员类别只能选11,12,13,14,15,其它不可见。需求单名称为2，检查员类别只能选12,其它不可见。需求单名称为3，检查员类别只能选12,其它不可见。需求单名称为4，检查员类别只能选13,其它不可见。需求单名称为5，检查员类别只能选14,其它不可见。需求单名称为6，检查员类别只能选15,其它不可见。需求单名称为7，检查员类别只能选11,12,13,14,15,其它不可见。需求单名称为8，检查员类别只能选11,12,13,14,15,其它不可见。需求单名称为9，检查员类别只能选11,12,13,14,15,其它不可见。需求单名称为10，检查员类别只能选32,其它不可见。需求单名称为11，检查员类别只能选21,22,其它不可见。需求单名称为12，检查员类别只能选21,22,其它不可见

你想要实现一个二级联动的下拉框，根据需求单名称的不同来限制可选的检查员类别。可以使用JavaScript来实现这个功能。

首先，需要在HTML中添加一个下拉框和一个用于显示检查员类别的div：

<label for="xqdmc">需求单名称：</label>
<select id="xqdmc" name="xqdmc">
  <option value="1">需求单1</option>
  <option value="2">需求单2</option>
  <option value="3">需求单3</option>
  <option value="4">需求单4</option>
  <option value="5">需求单5</option>
  <option value="6">需求单6</option>
  <option value="7">需求单7</option>
  <option value="8">需求单8</option>
  <option value="9">需求单9</option>
  <option value="10">需求单10</option>
  <option value="11">需求单11</option>
  <option value="12">需求单12</option>
</select>

<div id="jcy_lb" class="form-group">
  <label class="col-sm-2 control-label">检查员类别：</label>
  <div class="col-sm-9">
    <div class="radio-box">
      <input type="radio" id="jcy_11" name="jcy" value="11">
      <label for="jcy_11">11</label>
    </div>
    <div class="radio-box">
      <input type="radio" id="jcy_12" name="jcy" value="12">
      <label for="jcy_12">12</label>
    </div>
    <div class="radio-box">
      <input type="radio" id="jcy_13" name="jcy" value="13">
      <label for="jcy_13">13</label>
    </div>
    <div class="radio-box">
      <input type="radio" id="jcy_14" name="jcy" value="14">
      <label for="jcy_14">14</label>
    </div>
    <div class="radio-box">
      <input type="radio" id="jcy_15" name="jcy" value="15">
      <label for="jcy_15">15</label>
    </div>
    <div class="radio-box">
      <input type="radio" id="jcy_21" name="jcy" value="21">
      <label for="jcy_21">21</label>
    </div>
    <div class="radio-box">
      <input type="radio" id="jcy_22" name="jcy" value="22">
      <label for="jcy_22">22</label>
    </div>
    <div class="radio-box">
      <input type="radio" id="jcy_32" name="jcy" value="32">
      <label for="jcy_32">32</label>
    </div>
  </div>
</div>

然后，在JavaScript中添加代码来实现二级联动。首先，获取需求单名称和检查员类别的元素：

var xqdmc = document.getElementById("xqdmc");
var jcy_lb = document.getElementById("jcy_lb");

接着，添加一个事件监听器，当需求单名称被改变时，根据需求单名称的值来限制可选的检查员类别：

xqdmc.addEventListener("change", function() {
  var xqdmc_val = xqdmc.value;
  
  // 隐藏所有检查员类别选项
  jcy_lb.style.display = "none";
  
  switch (xqdmc_val) {
    case "1":
      // 只显示11、12、13、14、15选项
      document.getElementById("jcy_11").parentNode.style.display = "block";
      document.getElementById("jcy_12").parentNode.style.display = "block";
      document.getElementById("jcy_13").parentNode.style.display = "block";
      document.getElementById("jcy_14").parentNode.style.display = "block";
      document.getElementById("jcy_15").parentNode.style.display = "block";
      break;
    case "2":
      // 只显示12选项
      document.getElementById("jcy_12").parentNode.style.display = "block";
      break;
    case "3":
      // 只显示12选项
      document.getElementById("jcy_12").parentNode.style.display = "block";
      break;
    case "4":
      // 只显示13选项
      document.getElementById("jcy_13").parentNode.style.display = "block";
      break;
    case "5":
      // 只显示14选项
      document.getElementById("jcy_14").parentNode.style.display = "block";
      break;
    case "6":
      // 只显示15选项
      document.getElementById("jcy_15").parentNode.style.display = "block";
      break;
    case "7":
      // 只显示11、12、13、14、15选项
      document.getElementById("jcy_11").parentNode.style.display = "block";
      document.getElementById("jcy_12").parentNode.style.display = "block";
      document.getElementById("jcy_13").parentNode.style.display = "block";
      document.getElementById("jcy_14").parentNode.style.display = "block";
      document.getElementById("jcy_15").parentNode.style.display = "block";
      break;
    case "8":
      // 只显示11、12、13、14、15选项
      document.getElementById("jcy_11").parentNode.style.display = "block";
      document.getElementById("jcy_12").parentNode.style.display = "block";
      document.getElementById("jcy_13").parentNode.style.display = "block";
      document.getElementById("jcy_14").parentNode.style.display = "block";
      document.getElementById("jcy_15").parentNode.style.display = "block";
      break;
    case "9":
      // 只显示11、12、13、14、15选项
      document.getElementById("jcy_11").parentNode.style.display = "block";
      document.getElementById("jcy_12").parentNode.style.display = "block";
      document.getElementById("jcy_13").parentNode.style.display = "block";
      document.getElementById("jcy_14").parentNode.style.display = "block";
      document.getElementById("jcy_15").parentNode.style.display = "block";
      break;
    case "10":
      // 只显示32选项
      document.getElementById("jcy_32").parentNode.style.display = "block";
      break;
    case "11":
      // 只显示21、22选项
      document.getElementById("jcy_21").parentNode.style.display = "block";
      document.getElementById("jcy_22").parentNode.style.display = "block";
      break;
    case "12":
      // 只显示21、22选项
      document.getElementById("jcy_21").parentNode.style.display = "block";
      document.getElementById("jcy_22").parentNode.style.display = "block";
      break;
  }
  
  // 显示选项
  jcy_lb.style.display = "block";
});

这样，当需求单名称被改变时，就会根据需求单名称的值来限制可选的检查员类别。