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

【问题标题】：dynamic options for selected item in previous option list上一个选项列表中所选项目的动态选项
【发布时间】：2012-12-03 22:39:11
【问题描述】：

我正在编写一个应该包含两个选择标签的 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>

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

【问题讨论】：

标签： javascript html dynamic options

【解决方案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);

【讨论】：

抱歉，我从维基百科中错误地复制了错误的行 en.wikipedia.org/wiki/Continent 已修复
不是真的，我只是想说清楚...选项的数量现在对我来说并不重要。重要的是如何填充第二个选项？！！！我在上面添加了我的代码....

【解决方案2】：

在第一个 select 框中，您需要绑定到 onchange 事件。然后，您的事件处理程序将向服务器（提供所选大陆）进行 AJAX 回调，该服务器将返回国家列表（概率为 JSON）。

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

【讨论】：