jquery - Select end_time which is greater than start_time

Question

I'm using jQuery in a Rails app to show the start time and end time, which come from helper (I'm not using Datepicker).

In my form:

 .field
     = f.label :start_time
     = f.select :start_time, options_for_select( [""] + start_time, "#{f.object.start_time.strip}")       
    .span#end_time
      .field
        = f.label :end_time
        = f.select :end_time, options_for_select( [""] + end_time, "#{f.object.end_time.strip}")

The time list comes from helper (i.e. start_time and end_time). How can I validate the time so that I can only select an end_time that is greater than the start_time?

Answer 1

您可以禁用选项http://www.w3schools.com/tags/att_option_disabled.asp。

我会使用 javascript 来运行“end_time”选择选项数组并禁用任何小于“start_time”的选项。

像这样的东西（id和东西需要修改）：

$("#start_time").change(function() {
    // Get start time
    var start_time = $("#start_time").find(":selected").text();

    // Iterate through end time options
    $("#end_time option").each(function() {
        var end_time = $(this).text();
        // Depending on how end_time and start_time are formatted you may need to do some conversion here
        if (start_time > end_time) {
            $(this).attr('disabled','disabled');
        }
    });
)};