IFE-2016-SP_task31_verify_input_linkage

by baishusama

HTML

<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>

CSS

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;
}

JavaScript

/*--------------------
    通用函数
--------------------*/

// 解决 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);
};