很简单的html+js实现省市二级联动


<html>
    <head>
        <meta charset="UTF-8">
        <title>二级联动title>
        <script>
            var arr = [
                ["黄石", "大冶", "黄冈", "武汉", "荆州", "鄂州", "咸宁"],
                ["长沙", "株洲", "韶关", "湘潭"],
                ["郑州", "驻马店"],
                ["东莞", "广州", "深圳"]
            ]
            var selectobj = null
            function city(obj) {
                if(selectobj != null) {
                    selectobj.remove()
                }
                if(obj.value == -1) {
                    return
                }
                selectobj = document.createElement("select")
                for(var i = 0; i < arr[obj.value].length; i++) {
                    var optionobj = document.createElement("option")
                    optionobj.innerHTML = arr[obj.value][i]
                    selectobj.appendChild(optionobj)
                }
                document.body.appendChild(selectobj)
            }
        script>
    head>

    <body>
        <select onchange="city(this)">
            <option value="-1">
                <--请选择城市 -->
            option>
            <option value="0">湖北option>
            <option value="1">湖南option>
            <option value="2">河南option>
            <option value="3">广东option>
        select>
    body>
html>

你可能感兴趣的:(javaScript)