未列出的子类别

Question

有一个三级分类列表.

1. 主要范畴
2. 子范畴
3. 儿童类别

主类别和子类别正在工作，但无法显示子类别。此外，如果选择了相关类别，则“选择”选项不会出现在子类别中。

我在哪里搞错了？

​

$(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.size() < 0) {
      $items.hide();
      return;
    }
    $items.show().find('option').hide();
    $set.show().first().prop('selected', true);
    /* Child category */
    $items.change(function() {
      var $this = $(this).find(':selected'),
        rel = $this.attr('rel'),
        $set = $items2.find('option.' + rel);
      if ($set.size() < 0) {
        $items2.hide();
        return;
      }
      $items2.show().find('option').hide();
      $set.show().first().prop('selected', true);
    });
    /* */
  });
});

.cate {
  display: none;
}

.cate2 {
  display: none;
}

<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="2" rel="cars">Cars</option>
</select>
<select name="categoSubMain" class="cate">
  <option value="0" class="">Choose</option>
  <option value="3" class="accessories">Smartphone</option>
  <option value="8" class="accessories">Charger</option>
  <option value="1" class="sports">Basketball</option>
  <option value="4" class="cars">Tesla</option>
</select>
<select name="categoChildMain" class="cate2">
  <option value="0" class="">Choose</option>
  <option value="3" class="accessories">Smartphone</option>
  <option value="1" class="sports">Basketball</option>
</select>

​

JSFiddle Version

Answer 1

稍微改变了你的代码。它实现了你想要的，但现在你正面临着另一个问题--如果你有一个选择呢？给我点时间，我会想出办法的

​

$(document).ready(function () {
    var selectedData = {}
		$('select[name="categoMain"], select[name="categoSubMain"],select[name="categoChildMain"]').change(function () {
		  	var $this = $(this).find(':selected');
        selectedData[$(this).attr('name')]=$this.val()
		  	var rel = $this.data('rel');
        $(this).next('select').show()
          .find('option').hide()
          .end().find('option[data-rel="' + rel+'"]').show()
          .first().prop('selected', true);
        $(this).next('select').next('select').hide()
        console.log(selectedData);
		});
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="categoMain">
    <option value="0" data-rel="">Choose</option>
    <option value="1" data-rel="accessories">Cellphones</option>
    <option value="2" data-rel="sports">Sports</option>
    <option value="2" data-rel="cars">Cars</option>
</select>
<select name="categoSubMain" class="cate">
    <option value="0" data-rel="">Choose</option>
    <option value="3" data-rel="accessories">Smartphone</option>
    <option value="8" data-rel="accessories">Charger</option>
    <option value="1" data-rel="sports">Basketball</option>
    <option value="4" data-rel="cars">Tesla</option>
</select>
<select name="categoChildMain" class="cate2">
    <option value="0" data-rel="">Choose</option>
    <option value="3" data-rel="accessories">Smartphone</option>
    <option value="1" data-rel="sports">Basketball</option>
</select>

​