Как использовать JQuery для установки значения 2 html формы выбора элементов в зависимости от значения другого

Question

Мои навыки Javascript и JQuery в лучшем случае плохие, и это ****

У меня есть следующие три элемента в форме:

<select name="event_time_start_hours">
    <option value="blank" disabled="disabled">Hours</option>
    <option value="blank" disabled="disabled">&nbsp;</option>
    <option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    <option value="06">6</option>
    <option value="07">7</option>
    <option value="08">8</option>
    <option value="09">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="midnight">Midnight</option>
    <option value="midday">Midday</option>
</select>
<select name="event_time_start_minutes">
    <option value="blank" disabled="disabled">Minutes</option>
    <option value="blank" disabled="disabled">&nbsp;</option>
    <option value="00">00</option>
    <option value="15">15</option>
    <option value="30">30</option>
    <option value="45">45</option>
</select>
<select name="event_time_start_ampm">
    <option value="blank" disabled="disabled">AM / PM</option>
    <option value="blank" disabled="disabled">&nbsp;</option>
    <option value="am">AM</option>
    <option value="pm">PM</option>
</select>

Проще говоря, когда в «event_time_start_hours» выбрано «полночь» или «полдень», я хочу, чтобы значения «event_time_start_minutes» и «event_time_start_ampm» изменились на «00» и «am» соответственно.

Мой ОЧЕНЬ плохой кусок Javascript говорит так:

$(document).ready(function() {
    $('#event_time_start_hours').change(function() {
        if($('#event_time_start_hours').val('midnight')) {
        $('#event_time_start_minutes').val('00');
        }
    });
});

... и хотя я не очень удивлен, что это не работает, я не знаю, что делать дальше.

Я хочу сделать это исключительно по визуальным соображениям для пользователя, так как при отправке формы я игнорирую «минуты» и «am / pm». Я пытаюсь решить, будет ли лучше изменить выбранные значения, изменить выбранные значения, а затем отключить элемент или полностью скрыть их. Однако, без какого-либо успеха в достижении чего-либо, я не смог попробовать разные подходы, чтобы понять, что кажется правильным.

Я исключил такие очевидные вещи, как дублирование идентификатора элемента или просто отсутствие ссылки на JQuery.

Спасибо.

Answer 1

В вашем тесте вы не сравниваете значение #event_time_start_hours с полуночью, вы фактически устанавливаете это значение.

Попробуйте это:

$(document).ready(function() {
    $('#event_time_start_hours').change(function() {
        if($('#event_time_start_hours').val()=='midnight')) {
          $('#event_time_start_minutes').val('00');
        }
    });
});

Answer 2

Попробуйте это:

$(function() {
  $('[name=event_time_start_hours]').change(function() {
    if($(this).val() === 'midnight' || $(this).val() === 'midday') {
      $('[name=event_time_start_minutes]').val('00');
      $('[name=event_time_start_ampm]').val('am');
    }
  });
});

.val () без параметров возвращает значение со строкой, в которой вы устанавливаете значение.

Answer 3

проблема в том, что вы используете селектор идентификатора (#), но у ваших селекторов есть только имя.

Answer 4

Ваши выборы не идентифицированы

$ ('# event_time_start_hours') запрашивает

У вас есть их имена, поэтому ваш код должен быть:

$(document).ready(function() {
    $('select[name=event_time_start_hours]').change(function() {
        if($('select[name=event_time_start_hours]').val('midnight')) {
         $('select[name=event_time_start_minutes]').val('am');
         }
    });
});

Упс - исправлено от 00 до 'am'

Answer 5

Вам нужно использовать другую форму val(), чтобы получить текущее значение. И «полдень» должен быть «PM», хотя вы, вероятно, в любом случае не используете это значение в бэкэнде. Возможно, было бы лучше просто скрыть эти выпадающие списки, когда первый выпадающий имеет «полночь» или «полдень» - в этом случае, однако, проверки можно свернуть в один if.

РЕДАКТИРОВАТЬ : как отметил другой пользователь, вам также необходимо указать идентификаторы для выбора. Я предполагаю, что вы сделали это в приведенном ниже коде, поскольку это делает селектор короче.

$(document).ready(function() { 
    $('#event_time_start_hours').change(function() {
        var startHour = $(this).val(); 
        if(startHour == 'midnight') { 
            $('#event_time_start_minutes').val('00');
            $('#event_time_start_ampm').val('am');
            // or $('#event_time_start_minutes,#event_time_start_ampm').hide();
        }
        else if (startHour == 'midday') {
            $('#event_time_start_minutes').val('00');
            $('#event_time_start_ampm').val('pm');
            // or $('#event_time_start_minutes,#event_time_start_ampm').hide();
        }
    }); 
});