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()

说明：获取每个元素的紧随其后的兄弟匹配元素的集合。如果提供了选择器，则检索它只有当它与那个选择器匹配时才是下一个兄弟。

当你添加div时，他们不再是兄弟姐妹了

试试这个：

$('.cate').show()

＆＃13;

 $(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()
   });
 });

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这是因为.next（）选择下一个SIBLING，当你添加div时，你将孩子分开。

Answer 3

您正在使用$(this).next('select').show()，这将从DOM中选择下一个兄弟选择元素并显示它，现在不存在，因为选择现在位于div中。

如果要保留div，请使用id选择器绑定特定选择的事件。

 $(document).ready(function() {
   $('#firstSelect').change(function() {
     var $this = $(this).find(':selected');
     var rel = $this.data('rel');
        $("#secondSelect").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 id="firstSelect" 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 id="secondSelect" 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>

如果我在两个select之间添加div，则Javascript不起作用

3 个答案: