1

javascript で記述された 2 つのドロップダウン リストがあります。ページを読み込んでクリックすると、値が空であることを除いて、通常は値がドロップダウンして表示されます。

例えば

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

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 に答える
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そのため、オプション要素のも設定し、innerTextIE をサポートします。

于 2013-10-20T12:01:35.477 に答える