javascript - 用于选择国家/地区和国家的下拉菜单

标签 javascript html drop-down-menu html-select

我想要创建一个下拉菜单,它根据所选值生成另一个下拉菜单 例如,如果从第一个下拉列表中选择美国,则第二个下拉列表包含美国的各州。 我已经完成了大部分工作。我更喜欢 JavaScript 并使用数组

var country_arr = new Array("USA", "Singapore", "Pakistan")
var s_a = new Array();
s_a[0]="";
s_a[1]="CA|NJ|NY";
s_a[2]="paas|naas|taas";
s_a[3]="Islamabad|karachi|lahore";

但我还想要所选国家和州的“名称”,以便发送到 mysql 数据库。 我想我必须为此使用二维数组。但这次无法编码,非常需要您的帮助。

最佳答案

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        var citiesByState = {
            USA: ["NY","NJ"],
            Singapore: ["taas","naas"]
        }
        function makeSubmenu(value) {
            if(value.length==0) document.getElementById("citySelect").innerHTML = "<option></option>";
            else {
                var citiesOptions = "";
                for(cityId in citiesByState[value]) {
                    citiesOptions+="<option>"+citiesByState[value][cityId]+"</option>";
                }
                document.getElementById("citySelect").innerHTML = citiesOptions;
            }
        }
        function displaySelected() {
            var country = document.getElementById("countrySelect").value;
            var city = document.getElementById("citySelect").value;
            alert(country+"\n"+city);
        }
        function resetSelection() {
            document.getElementById("countrySelect").selectedIndex = 0;
            document.getElementById("citySelect").selectedIndex = 0;
        }
    </script>
</head>
<body onload="resetSelection()">
    <select id="countrySelect" size="1" onchange="makeSubmenu(this.value)">
        <option></option>
        <option>USA</option>
        <option>Singapore</option>
    </select>
    <select id="citySelect" size="1">
        <option></option>
    </select>
    <button onclick="displaySelected()">show selected</button>
</body>
</html>

关于javascript - 用于选择国家/地区和国家的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11483387/

相关文章:

javascript - Vue router-link 和自定义事件

html - 使用 VB6 中的 MAPI 控件发送带有 HTML 内容的消息

javascript - 标签在 IE8 中找不到动态创建的元素

javascript - 如何在没有 attachShadow 的情况下创建自定义元素?

css - SELECT 元素中的文本缩进在 Chrome 中不再有效

javascript - 将收入数据从 Google Analytics 电子商务片段提取到另一个收入跟踪片段

javascript - OneSignal 和 Firebase 云函数 - 返回未定义的预期 Promise 或值

javascript - JS函数根据文本内容更改html div的标题

javascript - 从javascript中同一div中的下拉列表中选择类别后显示项目

drop-down-menu - 如何从链接切换 Bootstrap 下拉菜单?