JavaScript练习：表单联动如示例图中所示，在页面中完成两个单选框，切换单选框的不同选项时下方显示的表单随之切换。

如示例图中所示，在页面中完成两个单选框，切换单选框的不同选项时下方显示的表单随之切换。
当选择在校生时，出现两个select下拉菜单，一个选择城市，一个选择学校，当选择非在校生时，出一个文本输入框
学校下拉菜单里的学校名单均为城市下拉菜单中所选的城市中的大学，当城市发生变化时，学校一起发生变化
城市及学校的数据随意编造即可，无需真实完整

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单联动</title>
    
        <style>
            body {
                font-size: 25px;
                font-family: 'Microsoft yahei';
            }
            
            input {
                border: 2px solid #a8a8a8;
                font-size: 25px;
                border-radius: 5px;
                outline: none;
            }
            
            .radio {
                display: inline-block;
                margin-left: 100px;
            }
            
            #form-container {
                width: 700px;
                margin: auto;
                padding: 100px;
            }
            
            #form-container span {
                width: auto;
                height: 50px;
                padding: 0 20px;
                margin-left: 25px;
                float: left;
            }
            
            #select-container {
                padding: 20px 0;
            }
            
            .hide{
                display: none;
            }
            
            .select {
                margin-left: 30px;
                width: 160px;
                height: 34px;
                padding: 6px 12px;
                font-size: 14px;
                line-height: 1.42857143;
                color: #555;
                background-color: #fff;
                background-image: none;
                border: 1px solid #ccc;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            }
            
        </style>
    </head>
    
    <body>
    
        <div id="form-container">
            <div id="radio-select" onchange="radioChange()">
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="inSchoolRadio" checked> 在校生
                    </label>
                </div>
                
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="outschoolRadio"> 非在校生
                    </label>
                </div>
            </div>

            <div id="select-container">
                <div class="inSchool">
                    <span>学校</span>
                    <select class="select" id="select1" onchange="selectDistrict()">
                        <option value="bj">北京</option>
                        <option value="sh">上海</option>
                        <option value="wh">武汉</option>
                    </select>
                    
                    <select class="select" id="select2">
                        <option value="pku">北京大学</option>
                        <option value="thu">清华大学</option>
                        <option value="bhu">北京航空航天大学</option>
                    </select>
                </div>

                <div class="outSchool hide">
                    <span>就业单位</span>
                    <input type="text" class="input">    
                </div>
            </div>    
        </div>
        
        <script type="text/JavaScript">
            function radioChange() {
    if (document.getElementById("inSchoolRadio").checked) {
        document.querySelector(".inSchool").className = "inSchool";
        document.querySelector(".outSchool").className = "outSchool hide";
    }
    else {
        document.querySelector(".inSchool").className = "inSchool hide";
        document.querySelector(".outSchool").className = "outSchool";
    }
}

function selectDistrict() {
    var data = {
        bj: ["北京大学", "清华大学", "北京航空航天大学"],
        sh: ["复旦大学", "上海交通大学", "同济大学"],
        wh: ["武汉大学", "华中科技大学", "武汉理工大学"]
    }
    var source = document.getElementById("select1");
    var target = document.getElementById("select2");
    var selected = source.options[source.selectedIndex].value;
    target.innerHTML = "";
    for (var i = 0; i < data[selected].length; i++) {
        var opt = document.createElement('option');
		opt.value = data[selected][i];
		opt.innerHTML = data[selected][i];
		document.getElementById('select2').appendChild(opt);
    }
}
        </script>    
    </body>
</html>