jquery - asp.net ドロップダウン リスト コントロールの変更で計算を行う

Question

私はこのhtmlマークアップを持っています:

<div class="table">
            <div class="col1 right">Start:

            </div>
            <div class="col2outer center">
                <div class="col2mid">
                    <asp:DropDownList ID="ddlStartHour" runat="server" onchange="Calculate();">
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>

</asp:DropDownList>
                </div>
                <div class="col2side">
                    <asp:DropDownList ID="ddlStartMinute" runat="server" onchange="calculateTime()">
 <asp:ListItem Value="0">0</asp:ListItem>
 <asp:ListItem Value="30">30</asp:ListItem>
 </asp:DropDownList>
                </div>
            </div>
        </div>
        <div class="table">
            <div class="col1 right">Finish:

            </div>
            <div class="col2outer center">
                <div class="col2mid">
                    <asp:DropDownList ID="ddlFinishHour" runat="server" onchange="Calculate();">
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem></asp:DropDownList>
                </div>
                <div class="col2side">
                    <asp:DropDownList ID="ddlFinishMinute" runat="server" >
<asp:ListItem Value="0">0</asp:ListItem>
<asp:ListItem Value="30">30</asp:ListItem>

 </asp:DropDownList>
                </div>
            </div>
        </div>
 <div class="margin1">
            <h4>total</h4>
             <h3><asp:Label ID="Label1" runat="server">0</asp:Literal></h3>
             <h4>hrs</h4>
    </div>

ユーザーの選択が変わったときにクライアント側で計算したいと思います。通常の html 要素を使用してこれを実行しようとする多くの投稿を見てきました。しかし、私の場合、asp.net コントロールを使用する必要があります。この JavaScript ( http://jsfiddle.net/VnwF7/4/ ) コードを使用しようとしましたが、asp.net コントロールでは機能しません。

function Calculate() {
    //get values
    var valuestart = $("#<%= ddlStartH.ClientID %>").val();
var valuestop = $("#<%= ddlFinishH.ClientID %>").val();

//create date format          
var timeStart = new Date("01/01/2007 " + valuestart).getHours();
var timeEnd = new Date("01/01/2007 " + valuestop).getHours();

var hourDiff = timeEnd - timeStart - 0.5;

$('#<%= lblDuration.ClientID %>').val(hourDiff);

}

ご協力いただきありがとうございます。