根據兩個不同的值控制用戶的日期選擇

Question

我有這種情況：

兩個datepickers和兩個值以及一個select（HTML條款）。

Select Start 
<input type="date" name ="datepicker_start" id="datepicker" value="" class="datepicker" size="20" /> 
<br> 
Select End 
<input type="date" name ="datepicker_end" id="datepicker2" value="" class="datepicker" size="20" /> 
<br> 
Balance 1 
<input type="number" name="tleave" id="Total" value="20" readonly="true" size="10" /> 
<br> 
Balance 2 
<input type="number" name="tleave2" id="Total2" value="2" readonly="true" size="10" /> 
<br> 
<select onchange="checkdate();" name="LeaveType"> 
    <option value="0"> select balance</option> 
    <option value="1"> Balance 1</option> 
    <option value="2"> Balance 2</option> 
    <option value="3"> Balance 3</option> 
</select> 

我開始建立一個代碼，用於檢查輸入日期並根據選擇選項將它與一個值進行比較。

function checkdate() { 

    var start = new Date($('#datepicker').val()).getTime(), 
     end = new Date($('#datepicker2').val()).getTime(); 
     diff = ((end - start)/86400000) ; 
     //1000 * 60 * 60 * 24 = 1 day = 86400000 
    if ($('#element option[value="1"]').attr("selected", "selected")) 
    { 
     if(diff > $('#Total').val()) 
     { 
      alert(diff+ " days of balance 1 more than the available"); 
     } 
    } 
    if ($('#element option[value="2"]').attr("selected", "selected")) 
    { 
     if(diff > $('#Total2').val()) 
     { 
      alert(diff+ " days of balance 2 more than the available"); 
     } 
    } 
}; 

I.E.讓我們考慮用戶有兩種不同的餘額，所以在他選擇持續時間後，根據他想要的餘額類型，如果餘額少於所請求的值，函數應該返回一個彈出式窗口。

目前的問題是：該功能不分離的變化選項（你會明白的更好，如果你檢查下面的代碼）

或這裏是我的JSFiddle

Answer 1

我設法固定它。 我添加ID來選擇

<select onchange="checkdate();" name="LeaveType" id="LeaveType"> 

的問題是在這些線路上：

if ($('#element option[value="1"]').attr("selected", "selected")) 

和

if ($('#element option[value="2"]').attr("selected", "selected")) 

我改變他們：

var option = document.getElementById("LeaveType").value; 
if (option =='1') 

和

if (option =='2') 

現在函數運行良好。 謝謝。

Answer 2

你可以使你的代碼更短的版本，如果你改變#Total ID，以#Total1並使用此：

function checkdate() { 
    var start = new Date($('#datepicker').val()).getTime(), 
     end = new Date($('#datepicker2').val()).getTime(); 
    var diff = ((end - start)/86400000) ; 
    var val = $('#LeaveType').val(); 
    if(diff > $('#Total'+val).val()){ 
     alert(diff+ " days of balance "+val+" more than the available"); 
    } 
};