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');
        }
    });
});

......虽然我并不感到非常惊讶但它不起作用，但我不知道接下来要做什么。

我想纯粹出于用户的视觉原因这样做，因为表单提交时我忽略了“分钟”和“上午/下午”。我正在尝试决定是否最好更改所选值，更改所选值，然后禁用该元素或完全隐藏它们。然而，在没有任何成功发生任何事情的情况下，我无法尝试不同的方法来看看感觉是否合适。

我已经排除了显而易见的事情，例如重复的元素ID或者只是没有链接到JQuery。

谢谢。

Answer 1

试试这个：

$(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 2

在你的测试中，你没有将#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 3

您需要使用其他形式的val()来获取当前值。并且“midday”应该是“PM”，尽管你可能还没有在后端使用该值。也许最好只是在第一次下拉时间为“午夜”或“中午”时隐藏这些下拉菜单 - 但在这种情况下，支票可以汇总成单个if。

编辑：正如其他用户所说，您还需要提供选择ID。我假设你已经在下面的代码中完成了它，因为它使选择器更短。

$(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();
        }
    }); 
});

Answer 4

您的选择不是ID'ed

$（'＃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固定为'上午'

Answer 5

问题是你正在使用id选择器（＃）但你的选择只有一个名字。

如何使用JQuery设置2个html表单选择元素的值，具体取决于另一个的值

5 个答案: