如何实现二级下拉菜单选中后展示对应输入框的级联联动效果

原有代码核心问题 #

• 一级下拉#category1未配置data-child关联属性，原有级联逻辑完全未触发，二级下拉始终处于禁用状态
• 输入框控制逻辑绑定的#niv1元素不存在，且HTML结构中缺少对应输入区域的DOM节点
• 二级选项筛选逻辑错误，原逻辑按选项value前缀匹配，实际应按optgroup的data-rel属性匹配一级下拉选中值

完整修复后代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ID服务申请表单</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form name="frmContact" id="frmContact" method="post" action="" enctype="multipart/form-data">
  <div class="banner">
    <h1>ID Service Request Form</h1>
  </div>
  <p>请填写下方要求的信息后提交ID申请表单，谢谢！</p>
  <fieldset>
    <legend>申请类型</legend>
    <table width="50%" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td width="41%" align="right" valign="middle">选择分类：</td>
        <td width="59%" align="left" valign="middle">
          <!-- 新增data-child属性关联二级下拉 -->
          <select name="category1" id="category1" data-child="category2">
            <option value="">请选择分类</option>
            <option value="a">AS400</option>
            <option value="w">Windows</option>
            <option value="o">Outlook</option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="right" valign="middle">选择子项：</td>
        <td align="left" valign="middle">
          <select disabled="disabled" class="subcat" id="category2" name="category2">
            <option value="">请选择子分类</option>
            <!-- AS400 -->
            <optgroup data-rel="a">
              <option value="1">修改账户</option>
              <option value="2">新建AS400账户</option>
              <option value="3">更换部门</option>
              <option value="4">重置密码</option>
            </optgroup>
            <!-- windows -->
            <optgroup data-rel="w">
              <option value="1">创建域ID</option>
              <option value="2">访问指定文件夹/驱动器</option>
            </optgroup>
            <!-- Outlook -->
            <optgroup data-rel="o">
              <option value="1">邮件清理</option>
              <option value="2">通知设置</option>
            </optgroup>
          </select>
        </td>
      </tr>
      <!-- 新增输入区域，默认隐藏 -->
      <tr id="inputArea" style="display: none;">
        <td align="right" valign="middle"><span id="inputLabel"></span>：</td>
        <td align="left" valign="middle">
          <input type="text" id="requestInput" name="requestInput" placeholder="请填写相关信息">
        </td>
      </tr>
    </table>
  </fieldset>
</form>
<script>
// 级联下拉逻辑
$("[data-child]").change(function() {
  const selectedGroup = $(this).val();
  const $childSelect = $("#" + $(this).attr("data-child"));
  // 未选中一级分类时禁用二级下拉
  if(!selectedGroup) {
    $childSelect.attr("disabled", "disabled").val("");
    $("#inputArea").hide();
    return;
  }
  // 启用二级下拉
  $childSelect.removeAttr("disabled");
  // 隐藏所有optgroup，仅显示匹配一级分类的optgroup
  $childSelect.find('optgroup').hide()
    .filter(function(i, e) {
      return $(e).attr("data-rel") === selectedGroup
    }).show();
  // 重置二级下拉为默认选项
  $childSelect.val("");
  // 隐藏输入区域
  $("#inputArea").hide();
});

// 二级下拉change事件，控制输入区域显示
$("#category2").change(function() {
  const selectedOpt = $(this).find("option:selected");
  const selectedVal = selectedOpt.val();
  const selectedText = selectedOpt.text();
  if(selectedVal) {
    // 选中有效子项时显示输入区域，更新说明标签
    $("#inputLabel").text(selectedText);
    $("#inputArea").show();
  } else {
    // 未选中有效子项时隐藏输入区域
    $("#inputArea").hide();
  }
});
</script>
</body>
</html>

实现效果说明 #

1. 选中一级分类的任意选项后，二级下拉自动启用，仅展示对应分类下的子选项
2. 选中二级下拉的任意有效子选项后，自动显示对应名称的说明标签和文本输入框
3. 切换一级分类时，自动重置二级下拉和输入区域的状态

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