Javascript下拉列表工作，但显示空值

Javascript dropdown list working, but displaying empty values

本文关键字：显示 空值 下拉列表 工作 Javascript      更新时间：2023-09-26

我有 2 个用 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>

您还可以使用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()'>

每次选择的值更改时，您都会调用这两个函数..因此将在选择中添加新选项..我不知道你为什么要这样做？？

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

您正在生成的 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。

你可以这样做（查看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>
相关文章：