/*-------------------- 通用函数 --------------------*/ // 解决 IE 和非 IE 浏览器在事件绑定方面的兼容性 function addEventHandler(elem, event, handler) { if (elem.addEventListener) { elem.addEventListener(event, handler, false); } else if (elem.attachEvent) { elem.attachEvent("on" + event, handler); } else { elem["on" + event] = handler; } } // 用于偷懒的 $ 方法 function $(selector) { var elem = null; if (selector.indexOf('#') === 0) { elem = document.getElementById(selector.slice(1)); } else if (selector.indexOf('.') === 0) { elem = document.getElementsByClassName(selector.slice(1)); } return elem; } /*-------------------- 数据 --------------------*/ var SCHOOLS = { "beijing": { "bju": "北京大学", "thu": "清华大学", "rmu": "中国人民大学", "bjnu": "北京师范大学", "bjhu": "北京航空航天大学", "bjitu": "北京理工大学" }, "shanghai": { "shjtu": "上海交通大学", "tju": "同济大学", "fdu": "复旦大学", "shu": "上海大学" }, "hangzhou": { "zju": "浙江大学", "zjitu": "浙江理工大学" } }; /*-------------------- DOM --------------------*/ var citySlt = $("#city"); var schoolSlt = $("#school"); function generateSchoolIn(city) { var schoolsInCity = SCHOOLS[city]; var html = ""; for (var schl in schoolsInCity) { html += "<option value='" + schl + "'>" + schoolsInCity[schl] + "</option>"; } return html; } addEventHandler(citySlt, "change", function(e) { schoolSlt.innerHTML = generateSchoolIn(e.target.value); }); window.onload = function() { schoolSlt.innerHTML = generateSchoolIn(citySlt.value); };
<form action=""> <input type="radio" value="student" name="status" id="student" checked="true" /> <label for="student">在校生</label> <input type="radio" value="notStudent " name="status" id="notStudent" /> <label for="notStudent">非在校生</label> <section class="s1"> <span>学校</span> <select name="city" id="city"> <option value="beijing">北京</option> <option value="shanghai" selected="true">上海</option> <option value="hangzhou">杭州</option> </select> <select name="school" id="school"></select> </section> <section class="s2"> <span>就业单位</span> <input type="text" name="employmentUnit" id="employmentUnit" /> </section> </form>
body { margin: 0; } form { position: relative; margin: 4em auto; padding: 2em; max-width: 50%; min-width: 360px; background: aliceblue; background: linear-gradient(-45deg, transparent 1.414em, aliceblue 0); } form:after { position: absolute; right: 0; bottom: 0; display: block; content: '\a0'; width: 0; height: 0; border-top: 1em solid skyblue; border-left: 1em solid skyblue; border-bottom: 1em solid transparent; border-right: 1em solid transparent; } label { display: inline-block; padding: 0.5em 2em 0.5em 0.5em; } #student:checked ~ .s1 { display: block; } #notStudent:checked ~ .s2 { display: block; } section { display: none; padding: 1em 0; text-align: center; } select { min-width: 8em; outline: none; } input[type="text"] { outline: none; }