SharePoint New and Edit Form Javascript Date Time Field

Question

I have a custom list that contains a date time field. The client requested we trim the time portion of the field to only show two available appointment times of 8:30 am and 1:30 pm. In order to do this I added the following javascript code to the New and Edit forms of the list. The problem I am having is when the users open the edit form it does not maintain the previously selected time value. It shows the first available value of 8:30 AM, so if the users open the edit form and change some other field than the time field they inadvertently change the originally selected time field to 8:30 am even if the originally selected time was 1:30PM. How can I get the code to default to the originally selected time value from the New form within Edit form?

<script type="text/javascript">
    $(document).ready(function () {
        var str=['8 AM','1 PM'];
        $("select[id$='_DateTimeField_DateTimeFieldDateHours']").each(function(i){
            $(this).html("");
            for(var i=0;str[i]!=null;i++){
                $(this).append('<OPTION value="'+str[i]+'">'+str[i]+'</OPTION>');
            }
        });
    });
</script>

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var str=['30'];
        $("select[id$='_DateTimeField_DateTimeFieldDateMinutes']").each(function(i){
            $(this).html("");
            for(var i=0;str[i]!=null;i++){
                $(this).append('<OPTION value="'+str[i]+'">'+str[i]+'</OPTION>');
            }
        });
    });       
</script>

Answer 1

Simply check if the input field contains a value:

$(document).ready(function () {
    var hours=['8 AM','1 PM'],
        minutes = ['30']; //don't see the point in putting a single value in an array, but I suppose if you decide to add more options later
    $("select[id$='_DateTimeField_DateTimeFieldDateHours']").each(function(){
        if ($(this).val()) return 1; //Returning non-false is the same as a continue statement in a for loop
        $(this).empty();
        for(var i=0, hour; hour = hours[i]; i++) {
            $(this).append('<OPTION value="'+ hour +'">'+ hour +'</OPTION>');
        }
    });
    $("select[id$='_DateTimeField_DateTimeFieldDateMinutes']").each(function(){
        if ($(this).val()) return 1;
        $(this).empty();
        for(var i=0, minute; minute = minutes[i]; i++){
            $(this).append('<OPTION value="'+ minute +'">'+ minute +'</OPTION>');
        }
    });
});       

Answer 2

You need to save the value before killing the contents of the drop down field with $(this).html("");, you need to save the selected value, if there is any:

var selectedHour = $(this).find("option:selected").text(); 

// .text() could fail

If it is set and it matches the appointment time in your loop, i would just call this:

$(this).append('<OPTION value="'+ hour +'" selected="selected">'+ hour +'</OPTION>');

Or attach the attribute in some better way.

Instead of calling $(this).html("") you can also call $(this).empty(), I believe.