Używam dwóch wyboru. Jeśli wybierzesz pierwszą wybraną, drugi staje się aktywny. Ale kiedy używam tagu DIV, javascript przestaje działać.

Jest to pracujący wersja JSFiddle

Jest to nie działa wersja bez tagów div Jsfiddle

jest to Wersja pracy na 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>

Co mogłoby być tego przyczyną?

1
Sahipsiz 3 czerwiec 2018, 10:33

3 odpowiedzi

Najlepsza odpowiedź
.next()

Opis : Uzyskaj natychmiast po rodzeństwie każdego elementu Zestaw dopasowanych elementów. Jeśli przewidziano selektor, odzyskuje Następny rodzeństwo tylko wtedy, gdy pasuje do tego selektora.

Kiedy dodajesz div nie rodzą się więcej

więc spróbuj tego:

$('.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>
2
לבני מלכה 3 czerwiec 2018, 07:47

To jest dlatego, że .nastą () wybiera następne rodzeństwo, gdy dodasz div, oddzielasz dzieci.

0
Eric Nail 3 czerwiec 2018, 07:39

Używasz $(this).next('select').show(), to wybiera kolejny element SIBLING Wybierz element z DOM i wyświetla go, co nie istnieje, ponieważ wybrana jest teraz w Div.

Użyj selektora ID, aby wiązać zdarzenia w określonym wyborze, jeśli chcesz zachować div.

 $(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>
0
Nandita Sharma 3 czerwiec 2018, 07:46