0

我试图从 javascript 创建的 html 选择中获取年份，但是应该读取数据的 javascript 函数找不到它。

这是 index.html 的代码

<html>
<head>
    <SCRIPT language="JavaScript" SRC="./js/calendar.js"></SCRIPT>
</head>

<body onload="yearList()">
    <div id="form">
        <table>
            <form name="cal_form">
                <tr>
                    <td>Month:</td>
                    <td>
                        <select name="month">
                            <option value="January">January</option>
                            <option value="February">February</option>
                            <option value="March">March</option>
                            <option value="April">April</option>
                            <option value="May">May</option>
                            <option value="June">June</option>
                            <option value="July">July</option>
                            <option value="August">August</option>
                            <option value="September">September</option>
                            <option value="October">October</option>
                            <option value="November">November</option>
                            <option value="December">December</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Year:</td>
                    <td id="yearoptiondiv">

                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button type="button" onclick="drawCalendar(gen_cal_settings())">Draw Calendar</button> 
                    </td>
                </tr>


            </form>
        </table>
    </div>
    <div id="calendar"></div>
</body>

这是 calendar.js 的代码

function drawCalendar(cal_settings){
var calendarTable;

calendarTable += '<table>';
calendarTable += '<tr>';
calendarTable += '<td colspan="2">';
calendarTable += cal_settings["month"] + " " + cal_settings["year"];
calendarTable += '</td>';
calendarTable += '</tr>';
calendarTable += '</table>';
document.getElementById("calendar").innerHTML=calendarTable;
}

function yearList(){
var x="",i;
x += "<select name='year'>";
for (i=2011;i<=3012;i++)
{
    x += "<option value='" + i + "'>" + i + "</option>";
}
x += "</select>";
document.getElementById("yearoptiondiv").innerHTML=x;
}

function gen_cal_settings(){
var cal_settings = new Array(); 
cal_settings["month"]=document.forms['cal_form']['month'].value;     
cal_settings["year"]=document.forms['cal_form']['year'].value;   
return cal_settings;    
}

Year 列表在页面正文的 onload 事件中运行。我究竟做错了什么？

4

2 回答 2

4

您正在访问SELECT的值，选择选项数组时。您需要的是selected option的值，而不是 select 的值。

你会想要这样的东西：

document.forms["cal_form"]["year"].options[document.forms["cal_form"]["year"].selectedIndex].value

但是那个人很丑。您应该尝试实现 Benjamin Gruenbaum 的建议并将此代码移动到一个处理程序中，该处理程序允许您更好地维护（和读取）您正在编写的 Javascript，这将允许您引用表单而不是每次都从 Document 访问它需要从中获取数据。

编辑

我把你的代码扔进了一个 JSFiddle 并用它玩了。我可以看到您的选择不是从返回的表单对象的一部分，document.forms["cal_form"]这告诉我您需要通过 Javascript 生成整个表单，或者您需要更改访问元素的方式，也许是通过id而不是按名称（使用document.getElementByID("id").

我还建议不要使用“innerHTML”来添加构建的 HTML 字符串。我建议通过 DOM 构建元素，一个示例是您的yearList函数，如下所示：

function yearList(){
  var select, option, year;
  select = document.createElement("select");
  select.setAttribute("name", "year");
  select.setAttribute("id", "year"); // For use accessing by ID and not name
  for (i = 2011; i <= 3012; ++i)
  {
    option = document.createElement("option");
    option.setAttribute("value", year);
    option.innerHTML = year;
    select.appendChild(option);
  }
  document.getElementById("yearoptiondiv").appendChild(select);
}

然后当您需要访问该值时：

document.getElementById("year").value;
于 2012-07-05T16:59:25.180 回答
0

问题出在 HTML 上。

你不能有然后

进行以下更改，它将起作用。原因是。当你有错误的 HTML 表单时，没有得到正确的布局，所以你不能向它添加新元素。

错误的：

<table>
        <form name="cal_form">
            ..............
            ..............
            ..............

        </form>
    </table>

将其更改为

<form name="cal_form">
  <table>

            ..............
            ..............
            ..............


  </table>
</form>
于 2012-07-05T17:07:46.847 回答