Javascript下拉列表有效，但显示空值答案

【问题标题】：Javascript dropdown list working, but displaying empty valuesJavascript下拉列表有效，但显示空值
【发布时间】：2013-10-20 11:59:06
【问题描述】：

我有 2 个用 javascript 编写的下拉列表。加载页面并单击它们后，它们会下拉并显示通常的值，但值是空的。

例如

---------------
|    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>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您还可以使用new Option 动态添加选项.. 到HTMLSelectElement 使用add 方法...

 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()'>

每次选择的值发生变化时，你都会调用你的两个函数。所以新的选项将被添加到选择中。我不知道你为什么这样做？？

【讨论】：

我已将其更改为 onload 而不是 onchange。感谢您指出！因为我已经接受了答案，所以我赞成你的答案
@Ken 选择元素没有 onload 选项.. 看这里.. stackoverflow.com/questions/679704/… .. 顺便说一句.. 你可以不接受一个答案并接受另一个.. ;)

【解决方案2】：

选项可以同时包含值和文本。您只是设置了值，因此它会正常运行，但不会显示任何文本。

您生成的 HTML 如下所示：

<select>
    <option value="M"></option>
    <option value="F"></option>
</select>

你想要这个：

<select>
    <option value="M">M</option>
    <option value="F">F</option>
</select>

因此，还要设置选项元素的textContent，并设置innerText 以支持IE。

【讨论】：

【解决方案3】：

您可以这样做（查看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>

【讨论】：