無法從選擇標簽JavaScript中檢索選項的值

Question

JSbin演示

我需要計算兩個日期之間的天差。 selecedIndex似乎可以通過警報框很好地運行。 當我嘗試從select標記中檢索選項的值時，它不會返回任何內容。

Answer 1

你有時會使用myForm用大寫在前其他時間myform 小寫 ，你必須選擇其中之一。

將您的recalcDateDiff()函數替換為以下內容，它將起作用：

JS：

function recalcDateDiff()
{
    var myForm = document.form1;

    alert("myForm.firstDay.selectedIndex = " + myForm.firstDay.selectedIndex);
    alert("myform.firstDay.options[myForm.firstDay.selectedIndex].value = " + myForm.firstDay.options[myForm.firstDay.selectedIndex].value);
    var firstDay = myForm.firstDay.options[myForm.firstDay.selectedIndex].value;
    alert("Did you make it here - after retrieving the value of firstDay?");
    var secondDay = myForm.secondDay.options[myForm.secondDay.selectedIndex].value;
    var firstMonth = myForm.firstMonth.options[myForm.firstMonth.selectedIndex].value;
    var secondMonth = myForm.secondMonth.options[myForm.secondMonth.selectedIndex].value;
    var firstYear = myForm.firstYear.options[myForm.firstYear.selectedIndex].value;
    var secondYear = myForm.secondYear.options[myForm.secondYear.selectedIndex].value;
    var firstDate = new Date(firstDay + " " + firstMonth + " " + firstYear);
    var secondDate = new Date(secondDay + " " + secondMonth + " " + secondYear);
    alert("secondDate.valueOf(): " + secondDate.valueOf() + "\nfirstDate.valueOf(): " + firstDate.valueOf());
    var daysDiff = (secondDate.valueOf() - firstDate.valueOf());
    daysDiff = Math.floor(Math.abs((((daysDiff/1000)/60)/60)/24));
    myForm.txtDays.value=daysDiff;
}

只需將myform替換為myForm 。 下次需要檢查瀏覽器控制台時進行工作；）

您的JsBin已更新

Answer 2

最好在這里而不是在其他地方發布代碼，以確保代碼在問題中持續存在。

正如Zakaria所指出的，您對表單名稱的大寫字母有疑問。 但是，如果將引用傳遞給使用this調用偵聽器的元素，則無論如何都不需要表單名稱。

此外，您還使用了一種很差的方法來將表單中的值轉換為Date對象。 請勿構造和解析字符串，尤其是不符合ECMA-262的字符串。 最好給選項提供合適的值（例如零索引月份數）並使用Date構造函數，例如

  <select name="firstMonth" onchange="recalcDateDiff(this)">
    <option value="0">Jan</option>
    <option value="1">Feb</option>
    <option value="2">Mar</option>
    <option value="3">Apr</option>
    <option value="4">May</option>
    <option value="5">Jun</option>
    <option value="6">Jul</option>
    <option value="7">Aug</option>
    <option value="8">Sep</option>
    <option value="9">Oct</option>
    <option value="10">Nov</option>
    <option value="11">Dec</option>
  </select>

默認情況下，您應該在每個選擇中都選擇一個選項。 瀏覽器通常會選擇第一個，但可能不會。

計算日期差的函數可以很簡單：

function recalcDateDiff(el) {
  var f = el.form;
  var d0 = new Date(f.firstYear.value, f.firstMonth.value, f.firstDay.value);
  var d1 = new Date(f.secondYear.value, f.secondMonth.value, f.secondDay.value);
  f.txtDays.value = Math.round((d1 - d0) / 8.64e7);
}

四舍五入可以解決夏令時邊界的過渡（過渡到夏令時時當前代碼不會執行此操作）。

如果您想驗證輸入的日期（例如2月30日），該日期需要額外的一行，但是您現有的功能無法執行此操作，因此我沒有將其包括在內。