javascript - 如果我在两个选择之间添加一个 div，Javascript 不起作用

Question

我用了两个Select。如果您选择第一个选择，另一个将变为事件状态。但是当我使用 div 标签时，JavaScript 停止工作。

这是工作版本JSFiddle

这是没有 DIV 标签的不工作版本JSFiddle

这是 StackOverFlow 上的工作版本

$(document).ready(function() {
  $('select').change(function() {
    var $this = $(this).find(':selected');
    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()
  });
});

.cate {
  display: none;
}

.cate2 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6">


  <select name="bcNewAd_mainCat" class="chosen-select-no-single">
    <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="bcNewAd_subCat" class="chosen-select-no-single 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>
</div>

这可能是什么原因？

Answer 1

.next()

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

当您添加 div 时，它们不再是 sibling

那么试试这个:

$('.cate').show()

 $(document).ready(function() {
   $('select').change(function() {
     var $this = $(this).find(':selected');
     var rel = $this.data('rel');
     $('.cate').show()
       .find('option').hide()
       .end().find('option[data-rel="' + rel + '"]').show()
       .first().prop('selected', true);
     $(this).next('select').next('select').hide()
   });
 });

.cate {
  display: none;
}

.cate2 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6">


  <select name="bcNewAd_mainCat" class="chosen-select-no-single">
    <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> </div>

<div class="col-md-6">
  <select name="bcNewAd_subCat" class="chosen-select-no-single 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></div>