Если я добавлю div между двумя select, Javascript не будет работать

Использую два 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>

Что могло быть причиной этого?

Попробуйте использовать $('.cate').show() вместо $(this).next('select').show()

— 03.06.2018 09:39

@ לבנימלכה Работаю, спасибо. Если вы пишете ответы, я приму ваш ответ.

— 03.06.2018 09:46

Рад был помочь!!!!

— 03.06.2018 09:48

javascript jquery html css

03.06.2018 09:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

137

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Это потому, что .next () выбирает следующий SIBLING, когда вы добавляете div, вы разделяете детей.

Спасибо, тоже приятная аналогия :)

— 03.06.2018 09:47

03.06.2018 09:39

Вы используете $(this).next('select').show(), это выбирает следующий родственный элемент select из DOM и отображает его, которого сейчас не существует, поскольку выбор теперь находится в div.

Используйте селектор id, чтобы привязать события к определенному выбору, если вы хотите сохранить 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>

03.06.2018 09:46

Ответ принят как подходящий

.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, они больше не братья и сестры

ТАК попробуйте это:

$('.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>

03.06.2018 09:47

Другие вопросы по теме

MVC C# Заполнение вложенных объектов AJAX JSON JQuery

Почему этот код не работает, когда я использую кнопку?

Как мне взаимодействовать с элементами на заднем плане модального окна?

Как мягко изменить размер div с помощью анимации или чего-то еще, когда по нему щелкают

Highchart.js не работает должным образом в чистом IE8

Есть ли способ инвертировать вертикальную и горизонтальную прокрутку Fullpage JS

Прокрутите каждое свойство объекта для столбчатых диаграмм amcharts

Есть ли идентификатор графика в Highcharts

Как сохранить переменную из POST после обновления страницы?

Как получить информацию о данных формы из заголовка

Если я добавлю div между двумя select, Javascript не будет работать

Ответы 3

Другие вопросы по теме

Похожие вопросы