JQuery timepicker end time based on meeting length?

Question

I'm trying to get my end time drop down values based on the length of meeting that I can pick. So my code look like this:

<tr>
    <th>Start:</th>
    <td><input type="text" id="start" name="start"/></td>
</tr>
<tr>
    <th>Length of meeting</th>
    <td>
       <select name="meeting" id="meeting" onClick="interval()">
          <option value="">--Select length--</option>
       </select>
    </td>
</tr>
<tr>
    <th>End:</th>
    <td><input type="text" id="end" name="end"></td>
</tr>

<script>
$(function() { 
    $('#start').timepicker({
       'minTime':'8:00 AM',
       'maxTime':'9:00 PM'
    });

    $('#end').timepicker({
       'minTime':'8:00 AM',
       'maxTime':'9:00 PM',
       'step':???(how to pass my value from meeting dropdown here?)
     });
   });

   function interval(){
    var meeting = $('#meeting').val();
    if(meeting == ''){
        $('#meeting').empty();
        $('#meeting').append('<option value="">--Select length--</option>');
        for(var i=5; i <= 60; i+=5){
            $('#meeting').append('<option value="'+i+'">'+i+'   min'+'</option>');
        }   
    }
}
</script>

So I can pick start time, then I can pick the length of my meeting that is created dynamically and then I should get my end time. Intervals of my meetings are from 5 to 60 min. So if I pick my start time 8:00am and my meeting length 15min, I should get my end time in intervals of 15min. So my first value in end dropdown will be 8:15am, then 8:30am and so on. For now I was able to hard code mt value in end timepicker 'step':15. What I need is that I want to pass my meeting length value and that way increment my end time. If anyone can help with this I would appreciate. Thanks in advance.

Answer 1

Use option:selected to find the current option's value:

$('#end').timepicker({
       'minTime':'8:00 AM',
       'maxTime':'9:00 PM',
       'step':$('#meeting').find('option:selected').val()
     });

[EDIT]

Actually, there were many things not working, I have created a jsfiddle

I changed the event binding to be made programmatically using

$('#meeting').bind('change', function () {
     setEndTime();
  });

Then defined setEndTime like this:

function setEndTime() {
     var meetingLength = parseInt($('#meeting').find('option:selected').val() || 0),
             selectedTime = $('#start').timepicker('getTime');
      selectedTime.setMinutes(selectedTime.getMinutes() + parseInt(meetingLength, 10), 0);
        $('#end').timepicker('setTime', selectedTime);
  }

Then changing the initialization of the #meeting dropdown to be the first thing:

for (var i = 5; i <= 60; i += 5) {
    $('#meeting').append('<option value="' + i + '">' + i + '   min' + '</option>');
  }

I also set the step to be a fixed value of 5 and added an event on $('#start'):

$('#start').on('changeTime', function () {
    setEndTime();
  });

This way it updates itself if you change the start time or the duration.

Final version which also changed the step in the endtime picker: http://jsfiddle.net/20m6b7qz/5/