如何在模态窗口中选择城市和街道信息

img

在模态窗口中选择城市和街道信息，点击确实按钮将得到的城市和街道信息显示到地址文本框中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #module {
        position: fixed;
        top: 100px;
        left: 50%;
        height: 100px;
        width: 400px;
        background-color: #eeeeee;
    }
</style>
<body>
<div>
    请选择地址：<input type="text" id="address">
    <button onclick="openModule()">请选择...</button>
</div>
<div id="module" style="display: none">
    <div style="width: 100%;height: 30px">
        <button style="float: right" onclick="closeModule()">x</button>
    </div>
    <form>
        城市：
        <select id="city" onchange="changeCity()"></select>
        区域/街道:
        <select id="street"> </select>
        <input type="button" name="确认" onclick="confirmSelect()" value="确认"/>
    </form>
</div>
</body>
<script>
    //数据初始化
    const cities = ["重庆", "北京"]
    const streetMap = {
        "重庆": ["渝北", "沙坪坝"],
        "北京": ["海淀", "丰台"]
    }

    //模态框元素
    const moduleEl = document.getElementById("module");
    //地址输入框元素
    const addressEl = document.getElementById("address");
    //城市下拉框元素
    const cityEl = document.getElementById("city");
    //街道下拉框元素
    const streetEl = document.getElementById("street");

    //下拉框初始化
    cities.forEach(city => {
        cityEl.options.add(new Option(city, city));
    })
    streetMap[cities[0]].forEach(street => {
        streetEl.options.add(new Option(street, street));
    })

    //打开模态框
    function openModule() {
        moduleEl.style.display = "block";
    }

    //确认选择
    function confirmSelect() {
        addressEl.value = cityEl.value + ", " + streetEl.value;
        closeModule();
    }

    //城市选择变化时
    function changeCity() {
        //清空街道下拉框
        streetEl.options.length = 0;
        //获取城市的值
        let city = cityEl.value;
        //获取城市对应的街道
        let streets = streetMap[city];
        //街道下拉框初始化
        streets.forEach(street => {
            streetEl.options.add(new Option(street, street));
        })
    }
    //关闭下拉框
    function closeModule() {
        moduleEl.style.display = "none";
    }
</script>
</html>