Показать Div с jquery в зависимости от списка (php)

Question

Я прочитал, как показать / скрыть div с помощью jquery, когда есть выпадающий выбор, построенный с помощью «select» и options.

Однако я пытаюсь выяснить, как это сделать когда у меня есть следующий код для выпадающего списка.

<?php echo $this->lists['catid']; ?>

Этот список отображает выпадающий список опций, и я хочу, чтобы указанная опция c показывала / скрывала div.

Следующий код может работать для выбора с указанным идентификатором c, например, «цель», но в моей ситуации, как я должен его использовать?

$('#catid').on('change', function() {
  if ( this.value == '37');
  {
    $("#business").show();
  }
  else
  {
    $("#business").hide();
  }
});
})

Это html выхода php кода

Спасибо

Answer 1

Вы можете l oop через каждую опцию и проверить значение. Если значение равно 37, тогда покажите эту опцию (или любой другой div, который вы хотите показать):

$('#catid').on('change', function() {
    $('#catid option').each(function() {
        if ($(this).val() === '37') {
            $(this).show()
        } else {
            $(this).hide()
        }
    })
})

ПРИМЕЧАНИЕ: Вы можете заменить $(this) на элемент / div что вы хотите показать / скрыть, если хотите показать / скрыть что-то еще.

Работающий JSFiddle здесь .

Answer 2

Попробуйте код должен работать для вас

$(document).ready(function(event) {
  $('#catid').on('change', function() {
    let selected = $('#catid').val();
    if (selected == 37) {
      $("#business").show();
    } else {
      $("#business").hide();
    }
  });
});

#business {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select id="catid">
  <option value="38">option 38(hide)</option>
  <option value="37">option 37(show)</option>
  <option value="39">option 39(hide)</option>
</select>
<div id="business">
  Division Visible!
</div>

Answer 3

$('#purpose').on('change', function() {   
    if (this.value == '37')
    { 
        $("#business").css('display','');
    }
    else
    {
        $("#business").css('display','none');
    }
});


 You also use this ans 

$('#purpose').on('change', function() {   
    if (this.value == '37')
    { 
        $("#business").show();
    }
    else
    {
        $("#business").hide();
    }
});