Блог

Главная - Вопросы по программированию - Jquery show не работает с параметрами выбора после скрытия

Jquery show не работает с параметрами выбора после скрытия

#jquery #bootstrap-4 #jquery-selectors

#jquery ( jquery ) #bootstrap-4 #jquery-селекторы

Вопрос:

Рассмотрите возможность следующего выбора начальной загрузки:

 <select id="parent" class="selectpicker">
<option value="1">Parent 1</option>
<option value="2">Parent 2</option>
</select>

<select id="child" class="selectpicker">
<option value="1">Child - Parent 1</option>
<option value="2">Child - Parent 2</option>
</select>

 $("#parent").on('change', function (e) { 
   var parentId = $(this).val();
   $("#child option").each((i,a) => {
      var childParentId = $(a).value();
      if(childParentId != parentId) {
         $(a).hide();
       } else { $(a).show() }
  });
   $("#child").selectpicker("refresh")
 });

Независимо от того, что я делаю, $(a).show() не имеет никакого эффекта.
Чего мне не хватает ?

Ответ №1:

Вам нужно использовать $(this) , чтобы получить dom, но не $(a)

Обновление: jsfiddle

  $("#parent").on('change', function (e) { 
   var parentId = $(this).val();
   $("#child option").each(function() {
      var childParentId =  $(this).val();
      if(childParentId != parentId) {
          $(this).hide();
       } else { $(this).show() }
  });
   // $("#child").selectpicker("refresh")
 }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="parent" class="selectpicker">
<option value="1">Parent 1</option>
<option value="2">Parent 2</option>
</select>

<select id="child" class="selectpicker">
<option value="1">Child - Parent 1</option>
<option value="2">Child - Parent 2</option>
</select>

Комментарии:

1. С классом selectpicker результат другой, параметры в дочернем выборе не отображаются.

2. @Debunkar Я добавил jsfiddle, он работает прямо сейчас

3. Привет, Алекс. Я определил основную причину проблемы, кажется, что атрибут ‘data-size’ для выбора (не в примере) в основном усугубляет проблему. Чтобы быть более конкретным, когда у меня есть этот атрибут при выборе, всякий раз, когда я пытаюсь скрыть параметры, ВКЛЮЧАЯ первый вариант из select, он скроет все. Если я не скрою первый вариант, он будет работать нормально. Однако, если я удалю атрибут data-size, все будет в порядке. Я не уверен, почему у него такое поведение. Есть идеи?

4. …Я использовал последнюю версию bootstrap select, теперь все в порядке… Спасибо за ваше время, Алекс.

Ответ №2:

Проблема в этой строке

var childParentId = $(a).value();

вы используете value() правильный синтаксис val()

Метки: ,