省市联动

139 阅读1分钟

同步到csdn,掘金才是大神,csdn要收费,我直接发免费。哈哈哈! 开头说明真的很重要,不然就没人看了,加油程序员,你是最棒的,我才是代码的主宰,代码修理bug,bug已修复。

省市联动

废话不多说,上代码 --罗
我的csdn blog.csdn.net/iamyoudad/a…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="sheng">
        <option value="0">请选择</option>
    </select>
    <select name="shi">
        <option value="0">请选择</option>
    </select>
    <select name="qu">
        <option value="0">请选择</option>
    </select>
</body>
<script>
     var shengEle = document.getElementsByName('sheng')[0];
    var shiEle = document.getElementsByName('shi')[0];
    var quEle = document.getElementsByName('qu')[0];
    var shengArr = ['广东', '四川', '新疆'];
    var shiArr = [['揭阳', '梅州'], ['成都', '攀枝花市'], ['乌鲁木齐', '新疆市区']];
    var quArr = [[['普宁', '梅园']], [['成都小区', '攀枝花小区']], [['乌鲁木齐小区', '新疆小区']]];
    shengshi(shengArr, shengEle)
    function shengshi(arr, ele) {
        arr.forEach(function (a, b) {
            var obj = new Option(a, b)
            ele.appendChild(obj)
        })
    }
    shengEle.onchange = function () {
        shiEle.innerHTML = `<option value="0">请选择</option>`
        quEle.innerHTML = `<option value="0">请选择</option>`
        shengshi(shiArr[this.value],shiEle)
    }
    shiEle.onchange = function(){
        shengshi(quArr[shengEle.value][this.value],quEle)
    }
</script>
</html>