三级联动（最详注释笔记）

知识点：

disabled属性：
属性规定某个选项应该被禁用。被禁用的选项既不可用，也不可点击。
onchange事件：
onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。
split方法：
split() 方法用于把一个字符串分割成字符串数组。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <select id="one">
        <option>请输入省</option>
    </select>
    <select id="two">
        <option>请输入市</option>
    </select>
    <select id="three">
        <option>请输入区</option>
    </select>


    <script type="text/javascript">
        var oone = document.getElementById('one');
        var otwo = document.getElementById('two');
        var othree = document.getElementById('three');
        otwo.disabled = true;
        othree.disabled = true;
        var str = ' ';
        var arr1 = [
            {"id":"1","value":"北京"},
            {"id":"2","value":"重庆"},
            {"id":"3","value":"上海"},
            {"id":"4","value":"广东"},
            {"id":"5","value":"深圳"}
        ];
        for(var i=0; i<arr1.length; i++){
            str += "<option value= " +arr1[i].id+ ">" +arr1[i].value+ "</option>"
        }
        oone.innerHTML += str;


        var arr2 = {
            "1":['100@北京'],
            "2":['200@渝北区','201@江北区','202@沙坪坝区'],
            "3":['300@傅东区'],
            "4":['400@广州'],
            "5":['500@东莞']
        }
        //onchange:指事件会域的内容发生改变时发生
        oone.onchange = function() {  //第一个下拉框选中之后执行的函数
            var val = this.value; //this指的是oone对象，即<select id="one">,关联的是arr1的id值，即第一个下拉框的value值。
            var arrA = arr2[val];   // arrA得到对应的第一个下拉框的选中值的arr2对象中的 []数组里的内容；
            var str1 = "<option>请输入市</option>" //这里也可以设置str1 = ' ';在otwo.innerHTML = str1处改写成 otwo.innerHTML += str1;
            for(j=0; j<arrA.length; j++){
                var aaa = arrA[j].split('@');   // split()方法是将一个字符串分割成 字符串数组；
                str1 += "<option value=" +aaa[0]+ ">" +aaa[1]+ "</option>"
            } //比如选中北京，那么aaa[0]=100,aaa[1]=北京
            otwo.innerHTML = str1;
            otwo.disabled =false; //让<select id="two">处于可操作状态；
        }

        var arr3 = {
            "100":['朝阳区','东城区'],
            "200":['光电园','人和'],
            "201":['观音桥','红旗河沟'],
            "202":['大学城','三峡广成'],
            "300":['简单的'],
            "400":['简单的'],
            "500":['简单的']
        }
            otwo.onchange = function() {
                var val2 = this.value;
                var arrB = arr3[val2];
                var str2 = "<option>请输入区</option>"
                for(k=0; k<arrB.length; k++){
                str2 += "<option>"+arrB[k]+"</option>"
                }
                othree.innerHTML = str2;
                othree.disabled = false;
            }
    </script>
</body>
</html>

三级联动（最详注释笔记）

知识点：

推荐阅读更多精彩内容