[英]Javascript dropdown list working, but displaying empty values
我有两个用javascript编写的dropdrown列表。在加载页面并单击它们时,它们下拉并显示通常为值的值,但值为空。
例如
---------------
| Gender |
---------------
| |<-- Is supposed to show "M"
---------------
| |<--Is supposed to shown "F"
我的代码
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function load(){
AgeDropDown();
genderlist();
}
function AgeDropDown(){
var list= document.getElementById("UserProfileAge");
for(var i=1;i<100;i++)
{
var opt = document.createElement("option");
opt.value= i;
list.appendChild(opt);
}
}
function genderlist(){
var list= document.getElementById("UserProfileGender");
var choices=["M","F"];
for(i=0;i<choices.length;i++)
{
var opt = document.createElement("option");
opt.value= choices[i];
list.appendChild(opt);
}
}
function load(){
AgeDropDown();
genderlist();
}
</script>
</head>
<body onload="load()">
<?php
include("usermenubar.inc");
?>
<form id='UserProfile' name='UserProfile' method='POST' action='editdetails.php'>
<div class='UserDetails'><!--dropdown-->
Age:<select id='UserProfileAge' name='UserProfileAge' onchange='AgeDropDown()'>
<option value=''>Please enter your age</option>
</select>
</div>
<div class='UserDetails'><!--Dropdown-->
Gender:<select id='UserProfileGender' name='UserProfileGender' onchange='genderlist()'>
<option value=''>Please enter your gender</option>
</select>
</div>
<input type='submit' name='UserProfileSubmit' value='Save Changes'/>
</form>
</body>
</html>
选项可以包含值和文本。 您只需设置该值,因此它将正常运行,但不会显示任何文本。
您生成的HTML将如下所示:
<select>
<option value="M"></option>
<option value="F"></option>
</select>
你要这个:
<select>
<option value="M">M</option>
<option value="F">F</option>
</select>
因此,还要设置选项元素的textContent
,以及用于IE支持的innerText
。
您还可以使用new Option
方法使用add
方法向HTMLSelectElement
动态添加选项...
function AgeDropDown(){
var list= document.getElementById("UserProfileAge");
for(var i=1;i<100;i++)
{
var opt =new Option(i,i) ;
list.add(opt);
}
}
function genderlist(){
var list= document.getElementById("UserProfileGender");
var choices=["M","F"];
for(i=0;i<choices.length;i++)
{
var opt = new Option(choices[i],choices[i]) ;
list.add(opt);
}
}
我也注意到了一个奇怪的事情..在你的标记......
<select id='UserProfileAge' name='UserProfileAge' onchange='AgeDropDown()'>
和
<select id='UserProfileGender' name='UserProfileGender' onchange='genderlist()'>
每当select的值发生变化时,你就调用了这两个函数..所以在select中会添加新选项..我不知道你为什么这样做?
你可以这样做(看看jsfiddle看它运行):
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function load(){
AgeDropDown();
genderlist();
}
function AgeDropDown(){
var list= document.getElementById("UserProfileAge");
for(var i=1;i<100;i++)
{
var opt = document.createElement("option");
opt.value= i;
opt.text = i;
list.appendChild(opt);
}
}
function genderlist(){
var list= document.getElementById("UserProfileGender");
var choices=["M","F"];
var choicesText=["Male","Female"];
for(i=0;i<choices.length;i++)
{
var opt = document.createElement("option");
opt.value= choices[i];
opt.text = choicesText[i];
list.appendChild(opt);
}
}
function load(){
AgeDropDown();
genderlist();
}
</script>
</head>
<body onload="load()">
<?php
include("usermenubar.inc");
?>
<form id='UserProfile' name='UserProfile' method='POST' action='editdetails.php'>
<div class='UserDetails'><!--dropdown-->
Age:<select id='UserProfileAge' name='UserProfileAge' onchange='AgeDropDown()'>
<option value=''>Please enter your age</option>
</select>
</div>
<div class='UserDetails'><!--Dropdown-->
Gender:<select id='UserProfileGender' name='UserProfileGender' onchange='genderlist()'>
<option value=''>Please enter your gender</option>
</select>
</div>
<input type='submit' name='UserProfileSubmit' value='Save Changes'/>
</form>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.