无法从select标记JavaScript中检索选项的值

时间:2015-08-02 20:08:26

标签: javascript html

JSbin demo

我需要计算两个日期之间的天差。警告框显示selecedIndex似乎工作得很好。当我尝试从select标签中检索选项的值时,它不会返回任何内容。

2 个答案:

答案 0 :(得分:1)

您有时将myForm upercase 一起使用,有时将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即可。下次必须检查浏览器控制台时才能完成工作;)

<强> Your JsBin updated

答案 1 :(得分:0)

最好在此处发布您的代码,而不是其他地方,以确保代码的持续时间与问题一样长。

正如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日)需要额外的一行,但你现有的功能没有这样做,所以我没有把它包括在内。