Question

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

E.g

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

Answer 1

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

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

Answer 2

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

和

{{1}}

每当select的值发生变化时，你都在调用你的两个函数..所以在select中会添加新选项..我不知道你为什么这么做？

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

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

3 个答案: