Показать / скрыть поле выбора, когда в полях пользователя WP выбрана другая опция выбора

Question

Я пытаюсь добавить некоторые пользовательские поля пользователя на страницу профиля пользователя WP, но не могу заставить их работать.Я хочу добавить выпадающий список для объекта.В зависимости от того, какое средство выбрано, я бы хотел показать другое раскрывающееся меню для местоположений в этом учреждении.

Моя проблема заключается в том, что все раскрывающиеся списки местоположений всегда отображаются независимо от того, какое средство выбрано.

Вот то, с чем я работаю:

<script>
$(document).ready(function(){
    $('#user_facility').change(function() {
      if ( this.value == 'option1') {
        $('#select1').show();
      } else {
          $('#select1').hide();
      }

      if ( this.value == 'option2') {
        $('#select2').show();
      } else {
          $('#select2').hide();
      }
    });
});
</script>

<select name="user_facility" id="user_facility">
    <option value="option1" <?php selected( 'option1', get_the_author_meta( 'user_facility', $user->ID ) ); ?>> option1</option>
    <option value="option2" <?php selected( 'option2', get_the_author_meta( 'user_facility', $user->ID ) ); ?>> option2</option>
</select>

<select name="select1" id="select1">
   ...some options
</select>

<select name="select2" id="select2">
   ...some options
</select>

Если кто-то может помочь мне направить меня в правильном направлении, это, как всегда, будет высоко оценено.

спасибо!

Answer 1

Необходимо проверить выбранное значение параметра с помощью $(this).val(), а не this.value.В любом случае просто измените ваши коды следующим образом -

<script>
    jQuery(document).ready(function($){
        $('#user_facility').change(function() {
          if ( $(this).val() == 'option1') {
            $('#select1').show();
          } else {
              $('#select1').hide();
          }

          if ( $(this).val() == 'option2') {
            $('#select2').show();
          } else {
              $('#select2').hide();
          }
        }).change();
    });
    </script>

    <select name="user_facility" id="user_facility">
        <option value="option1" <?php selected( 'option1', get_the_author_meta( 'user_facility', $user->ID ) ); ?>> option1</option>
        <option value="option2" <?php selected( 'option2', get_the_author_meta( 'user_facility', $user->ID ) ); ?>> option2</option>
    </select>

    <select name="select1" id="select1" style="display: none;">
       ...some options
    </select>

    <select name="select2" id="select2" style="display: none;">
       ...some options
    </select>