我需要一个下拉菜单,允许您从中选择一年(1900-2011)。我很确定java脚本具有相应的功能,但我完全不知道如何在代码中执行此操作。
我正在使用PHP。
这不是一回事吗?
while(i<2012){
add i to dropdown list
increment i
}
这是我目前的表格代码:
<form action="cite.php" method="post">
<h1>Newspaper</h1>
<script>
var select = document.getElementById("year");
for(var i = 2011; i >= 1900; --i) {
var option = document.createElement('option');
option.text = option.value = i;
select.add(option, 0);
}
</script>
<table width="100%">
<tr>
<td><h3>Author Name</h3></td>
<td><table width="100%" border="0">
<tr>
<td><label>
<input type="text" name="lastName" id="lastName" />
</label></td>
</tr>
<tr>
<td><label>
<input type="text" name="firstName" id="firstName" />
</label></td>
</tr>
</table></td>
</tr>
<tr>
<td><h3>Title of Article</h3></td>
<td><label>
<input type="text" name="artTit" id="artTit" />
</label></td>
</tr>
<tr>
<td><h3>Title of Newspaper</h3></td>
<td><label>
<input type="text" name="newsTit" id="newsTit" />
</label></td>
</tr>
<tr>
<td><h3>City</h3></td>
<td><label>
<input type="text" name="city" id="city" />
</label></td>
</tr>
<tr>
<td><h3>Date Published</h3></td>
<td><table width="100%" border="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><select id="year" name="year"></select>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><h3>Edition</h3></td>
<td><label>
<input type="text" name="edi" id="edi" />
</label></td>
</tr>
<tr>
<td><h3>Page Designation</h3></td>
<td><label>
<input type="text" name="page" id="page" />
</label></td>
</tr>
<tr>
<td><h3>Medium</h3></td>
<td><table width="200">
<tr>
<td><label>
<input type="radio" name="RadioGroup1" value="print" id="RadioGroup1_0" />
Print</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="RadioGroup1" value="web" id="RadioGroup1_1" />
Web</label></td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="text" name="med" id="med" />
</label></td>
</tr>
<tr>
<td><input type="hidden" name="hiddenField" id="hiddenField" /></td>
<td><label>
<input type="submit" name="Submit" id="Submit" value="Submit" />
</label></td>
</tr>
</table>
</form>
答案 0 :(得分:5)
假设你有这个元素:
<select id="year" name="year"></select>
您可以使用此代码:
var select = document.getElementById("year");
for(var i = 2011; i >= 1900; --i) {
var option = document.createElement('option');
option.text = option.value = i;
select.add(option, 0);
}
<强> See it in action 强>
但是:为什么需要这样做?是不是可以直接从服务器端填充下拉菜单,这会更自然吗?
更新:来自PHP:
<td>
<select id="year" name="year">
<?php for($i = 2011; $i >= 1900; --$i)
printf('<option value="%d">%d</option>', $i, $i);
?>
</select>
</td>
答案 1 :(得分:2)
var sel = document.getElementById('selectElementID');
var startAt = 1900;
var endAt = 2012;
for (i=0; i<=endAt; i++){
var opt = document.createElement('li');
opt.value = startAt + i;
opt.innerHTML = startAt + i;
sel.appendChild(opt)
}
或者,如果您更愿意使用while
:
var sel = document.getElementById('selectElementID');
var startAt = 1900;
var endAt = 2012;
var i = 0;
while (i<=endAt){
var opt = document.createElement('option');
opt.value = startAt + i;
opt.innerHTML = startAt + i;
sel.appendChild(opt)
i++;
}
答案 2 :(得分:1)
您可以使用document.createElement(“option”)和appendChild将节点添加到选择下拉列表中。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="select">
</select>
<script type="text/Javascript">
var menu = document.getElementById("select");
for(var i = 0; i < 20; i++) {
var newOption = document.createElement("option");
newOption.innerHTML = i;
menu.appendChild(newOption);
}
</script>
</body>
</html>