这是我的代码:
function setActualDate()
{
var d1 = new Date();
var y = d1.getFullYear();
var d = d1.getDate();
var m1 = d1.getMonth() + 1;
var m2 = d1.getMonth();
document.getElementById('entryDate').value = (y+"-"+m1+"-"+d);
document.getElementById('selectedYear').value = y;
document.getElementById('selectedMonth').value = ("0"+m2);
}
</script>
</head>
<body onload="setActualDate()">
<div id="page">
<h3> Welcome to Money Logger!</h3>
<form name="enter" action="enter.php" method="post">
Enter
<select name="mode">
<option selected="selected" value=""></option>
<option value="1">the money withdraw</option>
<option value="2">the money income</option>
</select>
<input id ="entryDate" type="date" name="entryDate">
<input type="text" name="entryName">
<input type="text" name="entryValue">
<input type="submit" value="Enter">
<input type="reset" value="Clear">
</form>
<form name="getEntry" action="getEntry.php" method="post">
Choose month and year for monthly overview:
<select name="month">
<option id = "selectedMonth" selected="selected" value=""></option>
</select>
<select name="year">
<option id = "selectedYear" selected="selected" value=""></option>
</select>
<input type="submit" value="Display">
</form>
</div>
</body>
我使用简单的javascript自动填写表单输入"entryDate,selectedYear,selectedMonth"按实际日期和其他脚本使用的其他日期.
我的问题是,当网站加载时,只会自动填充第一个输入 - 输入id = entryDate.
接下来的2个输入为空.但是,当我按F5并再次重新加载站点时,2个输入正确填充.
当你第一次加载网站时,能帮我解决这个问题吗？
谢谢
您没有使用<select>和<option>正确.<select>表示一个下拉列表,可以包含多个<option>元素.
一个<option>元素表示在下拉的选项.您关闭<option>有</option>.无论BETWEEN是什么,标签都会出现在下拉列表中:
<option>Hello</option> <!--user sees "Hello" as an option in the dropdown-->
另一方面,如果选择了选项,则在提交表单时,<option>s value属性包含将发送到服务器的字符串.您可以将此视为"真实"的价值<option>:用户不会看到它,但它是重要的.无论用户之间是什么<option>和</option>可见,但实际上什么也做不了.
通过将属性设置为(),可以"选择"下拉选项中的任何一个(即,在下拉列表中显示为选定选项).当用户选择一个选项时,将自动设置此属性(并清除其他选项上的属性).selectedselectedselected="selected"selected
首先,让我们让你的selectedYear下拉看起来正确.您需要手动提供几年作为选项:
<select id="selectedYear" name="year">
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
请注意,您需要指定一年两标记之间以及每个<option>的value属性,如上所述.还要注意我搬到id了<select>.有很少的理由选择一个单独<option>的<select>; 通常要修改下拉列表的选项,您应该选择<select>标记本身.
那么,让我们试试吧.我将重新创建上面的下拉列表,但我将使用JavaScript添加其选项:
<select id="selectedYear" name="year"></select>
<script type="text/javascript">
var dropdown = document.getElementById('selectedYear');
var start_year = 2011;
var end_year = 2013;
for (var i = start_year; i <= end_year; i++) {
dropdown.innerHTML += '<option value="' + i + '">' + i + '</option>';
}
</script>
该innerHTML函数允许您在元素的开始标记(在本例中为<select id="selectedYear" name="year">结束标记(</select>))之间设置HTML内容.
知道了这一点,使用JavaScript选择所需的选项非常容易.请记住,您可以通过将" selected属性<option>" 设置为"已选择" 来完成此操作.以下是您的setActualDate功能的一部分,显示如何设置selectedYear下拉列表的默认年份:
<script type="text/javascript>
function setActualDate() {
var d1 = new Date();
var year = d1.getFullYear();
var dropdown = document.getElementById('selectedYear');
//loop through the dropdown's options
for (var i = 0; i < dropdown.options.length; i++) {
var option = dropdown.options[i];
//check if this is the option we want to set
if (option.value == year) {
option.selected = true;
} else {
//ensure all other options are NOT selected
option.selected = false;
}
//NOTE: you can simplify the above if-else to just:
//option.selected = (option.value == year);
}
}
</script>
这应该足以让你开始.我希望这一切都有道理.
| 归档时间： |
|
| 查看次数： |
29209 次 |
| 最近记录： |