You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

嵌套单选按钮层级显示异常：subtier2-options无法正常展示求助

avatar
算力阿峰
2026-7-15
单选按钮层级显示问题：二级单选无法触发对应div显示

我之前实现了单选按钮关联div显示的功能，基础版本运行正常：点击一级单选按钮，会显示对应的二级div，同时隐藏其他二级div并清空表单值。

正常运行的代码

JavaScript 

$(".tier1-options :radio").on("change", function (e) {
  // 移除所有tier2-options的shown类并清空内部表单元素值
  $('.tier2-options')
    .removeClass('shown')
    .find('input, select').val('')
  
  // 显示当前单选按钮对应的tier2-options
  $(this)
    .parents('.tier1-options')
    .find('.tier2-options')
    .addClass('shown')
});

CSS 

.tier2-options {
  display: none;
  margin-left: 1rem;
  padding: 1rem;
  background-color: #EEE;
}

.shown{
  display: block;
}

HTML 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h5>选择一个选项：</h5>

<div class='tier1-options'>
  <label>
    <input name="useroption" type="radio" value="changeLocation">
    更改位置
  </label>

  <div class="tier2-options">
    <select name="availableMarkAsFullLocations">
      <option value="-">--请选择--</option>
      <option value="3">BOX#3</option>
      <option value="6">FREEZER#1</option>
      <option value="8">FREEZER#2</option>
      <option value="19">BOX#9</option>
      <option value="20">QBUILDING</option>
    </select>
  </div>
</div>

<div class="tier1-options">
  <label>
    <input name="useroption" type="radio" value="updateLocation">
    更新位置
  </label>

  <div class="tier2-options">
    <select name="availableUpdateLocations">
      <option value="-">--请选择--</option>
      <option value="3">BOX#3</option>
      <option value="6">FREEZER#1</option>
      <option value="8">FREEZER#2</option>
      <option value="19">BOX#9</option>
    </select>
  </div>
</div>


<div class="tier1-options">
  <label>
    <input name="useroption" type="radio" value="retireLocation">
    停用位置
  </label>

  <div class="tier2-options">
    <select name="availableRetireLocations">
       <option value="-">--请选择--</option>
       <option value="3">BOX#3</option>
       <option value="6">FREEZER#1</option>
       <option value="8">FREEZER#2</option>
       <option value="19">BOX#9</option>
       <option value="20">QBUILDING</option>
    </select>
  </div>
</div>

问题场景

当我添加「移动内容」选项后，点击其下的「Tier I 移动」或「Tier II 移动」单选按钮时，对应的subtier2-options无法显示。相关代码如下：

JavaScript 

$(".tier1-options :radio").on("change", function (e) {
      // 移除所有tier2-options的shown类并清空内部表单元素值
      $('.tier2-options')
        .removeClass('shown')
        .find('input, select').val('')
      
      // 显示当前单选按钮对应的tier2-options
      $(this)
        .parents('.tier1-options')
        .find('.tier2-options')
        .addClass('shown')
    });
    
    $(".subtier1-options :radio").on("change", function (e) {
      // 移除所有subtier2-options的shown类并清空内部表单元素值
      $('.subtier2-options')
        .removeClass('shown')
        .find('input, select').val('')
      
      // 显示当前单选按钮对应的subtier2-options
      $(this)
        .parents('.subtier1-options')
        .find('.subtier2-options')
        .addClass('shown')
    });

CSS 

.tier2-options {
  display: none;
  margin-left: 1rem;
  padding: 1rem;
  background-color: #EEE;
}

.shown{
  display: block;
}

.subtier2-options {
  display: none;
  margin-left: 1rem;
  padding: 1rem;
  background-color: #EEE;
}

HTML 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h5>选择一个选项：</h5>

<div class='tier1-options'>
  <label>
    <input name="useroption" type="radio" value="changeLocation">
    更改位置
  </label>

  <div class="tier2-options">
    <select name="availableMarkAsFullLocations">
      <option value="-">--请选择--</option>
      <option value="3">BOX#3</option>
      <option value="6">FREEZER#1</option>
      <option value="8">FREEZER#2</option>
      <option value="19">BOX#9</option>
      <option value="20">QBUILDING</option>
    </select>
  </div>
</div>

<div class="tier1-options">
  <label>
    <input name="useroption" type="radio" value="updateLocation">
    更新位置
  </label>

  <div class="tier2-options">
    <select name="availableUpdateLocations">
      <option value="-">--请选择--</option>
      <option value="3">BOX#3</option>
      <option value="6">FREEZER#1</option>
      <option value="8">FREEZER#2</option>
      <option value="19">BOX#9</option>
    </select>
  </div>
</div>


<div class="tier1-options">
  <label>
    <input name="useroption" type="radio" value="retireLocation">
    停用位置
  </label>

  <div class="tier2-options">
    <select name="availableRetireLocations">
       <option value="-">--请选择--</option>
       <option value="3">BOX#3</option>
       <option value="6">FREEZER#1</option>
       <option value="8">FREEZER#2</option>
       <option value="19">BOX#9</option>
       <option value="20">QBUILDING</option>
    </select>
  </div>
</div>

<div class='tier1-options'>
  <label>
    <input name="useroption" type="radio" value="moveContents">
    移动内容
  </label>

    <div class="tier2-options">
         <div class='subtier1-options'>
             <label>
              <input name="useroption" type="radio" value="moveContentsTierI">
              Tier I 移动
            </label>

             <div class="subtier2-options">
                 <select name="availableTierILocations">
                 <option value="-">--请选择--</option>
                 <option value="3">BOX#3</option>
                 <option value="6">FREEZER#1</option>
                 <option value="8">FREEZER#2</option>
                 <option value="19">BOX#9</option>
                 <option value="20">QBUILDING</option>
              </select>
             
             </div>
           
         </div> <!--end of <div class='subtier1-options'> -->
         
         <div class='subtier1-options'>
             <label>
              <input name="useroption" type="radio" value="moveContentsTierII">
              Tier II 移动
            </label>

             <div class="subtier2-options">
                 <select name="availableTierIILocations">
                 <option value="-">--请选择--</option>
                 <option value="3">BOX#3</option>
                 <option value="6">FREEZER#1</option>
                 <option value="8">FREEZER#2</option>
                 <option value="19">BOX#9</option>
                 <option value="20">QBUILDING</option>
              </select>
             
             </div>
           
         </div> <!--end of <div class='subtier1-options'> -->
         
         
    </div>
</div>

解决方案

问题核心是单选按钮name属性冲突：所有层级的单选都用了useroption作为name，导致点击二级单选时，会触发一级单选的change事件，进而清空表单值并隐藏相关元素。

修复步骤

  1. 给二级单选设置独立的name属性，确保同组互斥、不同组隔离
  2. 阻止二级单选的事件冒泡，避免触发一级单选的处理逻辑
  3. 优化元素选择范围，只操作当前层级内的元素

修复后的完整代码

JavaScript

$(".tier1-options :radio").on("change", function (e) {
  // 移除所有tier2-options的shown类并清空内部表单元素值
  $('.tier2-options')
    .removeClass('shown')
    .find('input, select').val('')
  
  // 显示当前单选按钮对应的tier2-options
  $(this)
    .parents('.tier1-options')
    .find('.tier2-options')
    .addClass('shown')
});

$(".subtier1-options :radio").on("change", function (e) {
  // 阻止事件冒泡，避免触发一级单选的change事件
  e.stopPropagation();
  
  // 仅清空当前二级容器内的subtier2-options
  $(this).parents('.tier2-options')
    .find('.subtier2-options')
    .removeClass('shown')
    .find('input, select').val('')
  
  // 显示当前单选对应的subtier2-options
  $(this)
    .parents('.subtier1-options')
    .find('.subtier2-options')
    .addClass('shown')
});

HTML（仅修改移动内容部分）

<div class='tier1-options'>
  <label>
    <input name="useroption" type="radio" value="moveContents">
    移动内容
  </label>

    <div class="tier2-options">
         <div class='subtier1-options'>
             <label>
              <input name="moveOption" type="radio" value="moveContentsTierI">
              Tier I 移动
            </label>

             <div class="subtier2-options">
                 <select name="availableTierILocations">
                 <option value="-">--请选择--</option>
                 <option value="3">BOX#3</option>
                 <option value="6">FREEZER#1</option>
                 <option value="8">FREEZER#2</option>
                 <option value="19">BOX#9</option>
                 <option value="20">QBUILDING</option>
              </select>
             
             </div>
           
         </div> <!--end of <div class='subtier1-options'> -->
         
         <div class='subtier1-options'>
             <label>
              <input name="moveOption" type="radio" value="moveContentsTierII">
              Tier II 移动
            </label>

             <div class="subtier2-options">
                 <select name="availableTierIILocations">
                 <option value="-">--请选择--</option>
                 <option value="3">BOX#3</option>
                 <option value="6">FREEZER#1</option>
                 <option value="8">FREEZER#2</option>
                 <option value="19">BOX#9</option>
                 <option value="20">QBUILDING</option>
              </select>
             
             </div>
           
         </div> <!--end of <div class='subtier1-options'> -->
         
         
    </div>
</div>

关键说明

  • name属性规则：同一组互斥的单选共享name，不同层级的单选属于不同组，必须使用不同name
  • 事件冒泡控制：添加e.stopPropagation()防止二级单选的事件触发一级单选的处理逻辑
  • 范围化操作：清空subtier2-options时，仅针对当前tier2-options下的元素，不影响其他区域

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.15 15:35:55