JavaScript下拉菜单

Question

我想创建三个下拉菜单.....这就是他们的样子。大陆将是第一个下拉菜单，第二个将是国家，所以如果从第一个中选择非洲，第二个将只有非洲的国家。当一个人点击第二个按钮，就是选择一个国家...比方说苏丹，那么第三个下拉将在苏丹有州/省。

我该怎么做呢？我想要简单和基本的东西？

我将以JavaScript数据类型存储它... {“北美”：美国、加拿大、“非洲”：“肯尼亚”、“通西亚”、“莫罗科”}

Answer 1

我推荐使用jQuery库来简化数据绑定。假设您已经按照问题中的说明定义了数据类型，那么您可以拥有包含所有信息的json对象。例如，你有{Continent：[Countries:州/省，...]，...)然后，对于第一个选择器，您所要做的就是通过获取对象的关键字来显示大陆。然后，使用所选键的值(另一个json字符串)定义的键填充第二个下拉框。接下来，根据Country子字符串，创建另一个JSON对象，并根据第二个下拉列表的选择再次按键进行搜索。最后，您将使用位于国家键的值填充第三个下拉列表。

基本上，您拥有的是一个两层的JSON对象，第一级包含大陆作为关键字，值为第二级，其中包含国家作为关键字，国家/省份作为值。

如果您知道所有的数据，就没有理由创建一个数据对象来保存数据，一个JSON字符串就足够了。

Answer 2

下面就是我要找的东西。我刚想通了。感谢James Khoury

            <form id="someform" >
            <select id="sample"  onChange="myfunction(this)"> 
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            </select>
            </form>
            <form id="someform" >
            <select id="samp" > 
            <option value="1">Fire Power</option>
            </select>
            </form>
            <script type="text/javascript">
            function myfunction(myObj) {
            var myselect=document.getElementById("samp")
            try{
            myselect.add(new Option("New Last Option", "0"), null) //a
            "sample"
             myselect.add(new Option("New First Option", "1"), myselect.options[0]) 
             }
             catch(e){ //in IE, try the below version instead of add()
             myselect.add(new Option("New Last Option", "0")) 
             myselect.add(new Option("New First Option", "1"), 0) 
             }
             }
             </script>