Question

我正在写一个应该包含两个select标签的html。为清楚起见，第一个选择标记包括大陆的名称，用户应选择其中一个。第二个选择标记应在第一个选择标记中动态显示所选大陆的国家/地区名称。有谁可以帮我理解我应该如何通过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>

现在它的效果和我想要的一样.....

Answer 1

<强> 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);

Answer 2

在第一个select框中，您要绑定到onchange事件。然后，您的事件处理程序将向服务器（提供选定的大陆）发出AJAX调用，该服务器将返回国家/地区列表（可能为JSON）。

然后，您可以使用该列表填充第二个options框的select。

上一个选项列表中所选项目的动态选项

2 个答案: