0

2 つの選択タグを含める必要がある html を作成しています。明確にするために、最初の選択タグには大陸の名前が含まれており、ユーザーはそれらのいずれかを選択する必要があります。2 番目の選択タグは、最初の選択タグで選択された大陸の国名を動的に表示する必要があります。JavaScript関数で実装する方法を理解するのを手伝ってもらえますか? 最初の select タグにどのイベントを設定する必要がありますか? オプションまたは選択タグでイベントを設定する必要がありますか?

<html lang="en">
<head>
<meta cahrset="utf-8">
    <title>Java Script Question Exam</title>
    <script  type="text/javascript">
    var la=["chili","castarica","cuba","jamaieca"];
    var as=["Iran","Iraq","China","Japan"];
    var eu=["Italy","France","Sweden"];
    var af=["Egypt","Morocco"];
    var continents=new Array(la,as,eu,af);

function ContinentFun(input)
{
    var cont=document.getElementById("continent");
    var selected=cont.options.selectedIndex;
    var e=continents[selected];
    var d = document.getElementById(input);
    if(d.length==0)
    {
        for(var j=0; j<e.length;j++)
        {   
            d.add(new Option(e[j],"")); 
        }
    }
    else 
    {
        if (d.length<e.length)
        {
            for(var i=0; i<d.length;i++)
            {   
                d.options[i].text=e[i];     
            }
            for(var j=d.length; j<e.length;j++)
            {   
                d.add(new Option(e[j],"")); 
            }
        }
        else 
        {
            if(d.length>e.length)
            {
                for(var i=0; i<e.length;i++)
                {   
                    d.options[i].text=e[i];     
                }
                for(var j=e.length; j<d.length;j++)
                {   
                    d.remove(j);    
                }
            }
            else
            {
                for(var i=0; i<e.length;i++)
                {   
                    d.options[i].text=e[i];     
                }
            }
        }
    }
}
         </script>
</head>
<body>
    <form id="form1">

        <table id="t1" border="2">
            <tr>
            <td>Select your Continent</td>
            <td>
              <select id="continent" size="1" onchange='ContinentFun("country")'>
                <option>Latin America</option>
                <option>Asia</option>
                <option>Eroupa</option>
                <option>Africa</option>
              </select>
             </td>
            </tr>
            <tr>
                <td>Select Country</td>
                <td>
                    <select id="country" size="1" width="15">
                    </select>
                </td>
            </tr>
        <tr>
            <td></td>
            <td>
               <input type="button" name="Send" value="Send" onclick='PrintInfo("continent","country","t1")' />
            </td>
        </tr>
    </table>
    <br><br><br>
    <textarea id="t1">
    </textarea>
</form>
</body>
</html>

それは今、私が望んでいたように機能します.....

4

2 に答える 2

3

HTML

<select id='continentSelector'>
    <option>Africa</option>
    <option>Antarctica</option>
    <option>Asia</option>
    <option>Australia</option>
    <option>Europe</option>
    <option>North America</option>
    <option>South America</option>
</select>

Javascript

var selector = document.getElementById('continentSelector');
selector.addEventListener("change",function() {
     alert(this.value); // that will alert 'Africa' / 'Europe' .. etc

     // you can do your logic for the second selector here
     // eg. getCountriesByContinent(this.value);
},false);
于 2012-12-03T22:45:34.420 に答える
0

最初のselectボックスで、イベントにバインドしますonchange。次に、イベント ハンドラーはサーバーに AJAX コールバックを行い (選択された大陸を提供)、国のリストを返します (おそらく JSON として)。

次に、そのリストを使用してoptions、2 番目のselectボックスにデータを入力できます。

于 2012-12-03T22:41:25.663 に答える