0

我正在编写一个应该包含两个选择标签的 html。为了清楚起见，第一个选择标签包括大陆的名称，用户应该选择其中一个。第二个选择标签应在第一个选择标签中动态显示所选大陆的国家名称。谁能帮我理解我应该如何通过 JavaScript 函数来实现它？应该在第一个选择标签上设置什么事件？应该在选项或选择标签上设置事件吗？

<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您的第二个select框。

于 2012-12-03T22:41:25.663 回答