JavaScript的下拉列表正在工作，但顯示空值

我有2個用javascript寫成的dropdrown列表。加載頁面並單擊它們時，它們會下拉並顯示通常爲值的內容，但值爲空。JavaScript的下拉列表正在工作，但顯示空值

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>

來源

2013-10-20 Kenneth .J

你也可以使用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()'>

您所呼叫的兩個每次選擇變化的值功能..所以新的選項將被添加在選擇..我不知道你爲什麼這樣做？

來源

2013-10-20 12:17:42

我已經改變了它爲onload，而不是平變化。感謝您指出！我upvoted你的答案，因爲我已經接受了一個答案 –

@肯選擇元素沒有onload選項..看這裏.. http://stackoverflow.com/questions/679704/what-html-tags-support-the-onload -onerror-javascript-event-attributes ..並順便說一句..你可以不接受答案並接受另一個..;） –

選項可以同時擁有價值和文本。你只是設置了值，所以它會正常運行，但不顯示任何文本。

您正在生成看起來像這樣的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-20 12:01:35 FakeRainBrigand

你可以像下面這樣做（檢查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-20 12:19:58 Michael

JavaScript的下拉列表正在工作，但顯示空值

回答

相關問題