Calculating difference time HH;MM with selected item change option tag

Question

guy's i have a problem while i creating a code for calculating time difference in HH;MM but i need to do that with selected item change in option tag.

when the option tag has selected, the function has difference method to calculate the time. this the fiddle i was made... this is the 1st fiddle without the option tag

$(document).ready(function(){
    var $time1 = $("#start");
    var $time2 = $("#end");
    var $diff = $("#totalTime");
   
    function updateHours(){   

        var dtStart = new Date("7/20/2015 " + $time1.val());
        var dtEnd = new Date("7/20/2015 " + $time2.val());


        var diff = ((dtEnd - dtStart)) / 1000;
        
        var totalTime = 0;
        var overTime = 0;
        
        if (diff > 60*60*8) {
            totalTime = formatDate(60*60*8);
            ;
        } else {
            totalTime = formatDate(diff);
        }

        $diff.val(totalTime);
     
    }
            
    function formatDate(diff){
        var hours = parseInt( diff / 3600 ) % 24;
        var minutes = parseInt( diff / 60 ) % 60;
        var seconds = diff % 60;

        return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes);
    }

    $("#start, #end").on("change, keyup", function(){
        if($time1.val() && $time2.val()){
            updateHours();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="time" id="start" name="logintime"/>
<input type="time" id="end"name="logouttime" />

<br /><br />
Total: <input id="totalTime" readonly="readonly" />
<br /><br />

and this fiddle that i want to make. but i failed to make it. i dont know why the function not running well. please help me to solve this

$(document).ready(function(){
    var $time1 = $("#start");
    var $time2 = $("#end");
    var $diff = $("#jam_total");

   
    function updateHours(){   

        var dtStart = new Date("7/20/2015 " + $time1.val());
        var dtEnd = new Date("7/20/2015 " + $time2.val());
		var stats1 = $("#status_check").val();
		
        var diff = ((dtEnd - dtStart)) / 1000;
       if(stats1!='TERUS'){
    		var diff = ((dtEnd - dtStart)) / 1000;
		}else if(stats1!='ISTIRAHAT'){
    		var diff = ((dtEnd - dtStart - 1)) / 1000;
		}else if(stats1!='TANPA ISTIRAHAT'){
    		var diff = ((dtEnd - dtStart)) / 1000;
		}
        var totalTime = 0;
        var overTime = 0;
        
        if (diff > 60*60*8) {
            totalTime = formatDate(60*60*8);
            ;
        } else {
            totalTime = formatDate(diff);
        }

        $diff.val(totalTime);
     
    }
            
    function formatDate(diff){
        var hours = parseInt( diff / 3600 ) % 24;
        var minutes = parseInt( diff / 60 ) % 60;
        var seconds = diff % 60;

        return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes);
    }

    $("#option2").on("change, keyup", function(){
        if($time1.val() && $time2.val()){
            updateHours();
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="time" id="start" name="logintime"/>
<input type="time" id="end"name="logouttime" />
<br /><br />
<select name="option2" id="option2" onchange="Choose1(this)" style="float:left">
      <option value="-">-</option>
      <option value="terus">terus</option>
      <option value="istirahat">istirahat</option>
      <option value="tanpa istirahat">tanpa istirahat</option>
    </select><input type="text" name="status_check" size="8" readonly="readonly" id="status_check" style="text-transform:uppercase"  />
    
<br /><br />
Total: <input type="text"  id="jam_total" type="text" name="jam_total" size="18" readonly="readonly"> 
<br /><br />

Answer 1

Change event like this,

$("#option2").on("change", function(){ //keyup removed       
});

Hope helps,