1

我有 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>
4

3 回答 3

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选项元素的，并且innerText对于IE的支持。

于 2013-10-20T12:01:35.477 回答
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()'>

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

于 2013-10-20T12:17:42.723 回答
1

您可以这样做（查看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>
于 2013-10-20T12:19:58.727 回答