三级联动分类故障排查：子分类无法显示及Choose选项缺失问题

我帮你梳理下代码里的几个关键问题，这就是导致三级分类不显示、"Choose"选项消失的核心原因：

核心问题排查 #

• 事件绑定嵌套错误：你把$items.change()的事件处理函数写在了$cat.change()里面，这意味着每次主分类切换时，都会给子分类重复绑定change事件——不仅会导致逻辑混乱，初始状态下子分类的change事件也不会生效（因为主分类没触发过change的话，这个绑定根本没执行）。
• 判断条件错误：代码里用if ($set.size() < 0)来判断是否有匹配的选项，但size()返回的是元素数量，最小是0，这个条件永远不会成立，应该改成if ($set.length === 0)（jQuery中length比size()更常用）。
• 三级分类关联不匹配：子分类的选项没有设置对应的rel属性，三级分类的选项class也和子分类的rel不对应，导致层级关联完全失效。
• "Choose"选项被误隐藏：切换分类时，你隐藏了所有选项只显示匹配的分类选项，但没有把默认的"Choose"选项排除在外，导致它也被隐藏了。

修复后的完整代码 #

JavaScript #

$(document).ready(function() {
  var $cat = $('select[name=categoMain]'),
      $items = $('select[name=categoSubMain]'),
      $items2 = $('select[name=categoChildMain]');

  // 主分类切换事件
  $cat.change(function() {
    var $this = $(this).find(':selected'),
        rel = $this.attr('rel'),
        $set = $items.find('option.' + rel);

    if ($set.length === 0) {
      $items.hide();
      $items2.hide(); // 主分类无对应子分类时，同步隐藏三级分类
      return;
    }

    $items.show().find('option').hide();
    $items.find('option[value="0"]').show(); // 显示默认Choose选项
    $set.show().first().prop('selected', true);
    
    // 触发子分类change事件，自动初始化三级分类
    $items.trigger('change');
  });

  // 子分类切换事件（移到外层，只绑定一次）
  $items.change(function() {
    var $this = $(this).find(':selected'),
        rel = $this.attr('rel'),
        $set = $items2.find('option.' + rel);

    if ($set.length === 0) {
      $items2.hide();
      return;
    }

    $items2.show().find('option').hide();
    $items2.find('option[value="0"]').show(); // 显示默认Choose选项
    $set.show().first().prop('selected', true);
  });

  // 初始化状态：隐藏子分类和三级分类
  $items.hide();
  $items2.hide();
});

CSS #

.cate { display: none; }
.cate2 { display: none; }

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="categoMain">
  <option value="0" class="">Choose</option>
  <option value="1" rel="accessories">Cellphones</option>
  <option value="2" rel="sports">Sports</option>
  <option value="3" rel="cars">Cars</option>
</select>
<select name="categoSubMain" class="cate">
  <option value="0" class="">Choose</option>
  <option value="3" class="accessories" rel="smartphone">Smartphone</option>
  <option value="8" class="accessories" rel="charger">Charger</option>
  <option value="1" class="sports" rel="basketball">Basketball</option>
  <option value="4" class="cars" rel="tesla">Tesla</option>
</select>
<select name="categoChildMain" class="cate2">
  <option value="0" class="">Choose</option>
  <option value="5" class="smartphone">iPhone</option>
  <option value="6" class="smartphone">Samsung</option>
  <option value="7" class="basketball">NBA Official</option>
  <option value="9" class="charger">Fast Charger</option>
  <option value="10" class="tesla">Model 3</option>
</select>

修复说明 #

1. 调整事件绑定结构：把$items.change()移到$cat.change()外面，确保只绑定一次，避免重复触发逻辑。
2. 修正判断条件：用$set.length === 0替代错误的<0判断，正确检测是否有匹配的选项。
3. 完善层级关联：给子分类的每个选项添加rel属性，三级分类的选项class对应子分类的rel值，实现正确的层级联动。
4. 恢复"Choose"选项：在切换分类时，单独显示value="0"的默认选项，确保它不会被隐藏。
5. 初始化优化：页面加载时自动隐藏子分类和三级分类，主分类切换时自动触发子分类的change事件，同步更新三级分类状态。

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