原生JS三级联动菜单

<meta charset="utf-8">
<style>
.hide {display: none;}
</style>

<input type="text" id="input2" /><br />

<select size="5" id="aaa">
<option>-请选择-</option>
</select>

<select size="5" id="bbb" class="hide">
<option>-请选择-</option>
</select>

<select size="5" id="ccc" class="hide">
<option>-请选择-</option>
</select>

<script>
var aData = ['四川', '广东'];

var bData = [
	['成都', '凉山'], 
	['广州', '深圳'], 
];

var cData = [
	[
		['青羊', '武侯'],
		['西昌', '冕宁'],
	],
	[
		['天河', '越秀'],
		['华强北', '华强南'],
	],
];

(function () {
	var len = aData.length;
	for (var i = 0; i < len; i++) {
		var o = document.createElement('option');
		o.innerHTML = aData[i];
		o.value = i;
		aaa.appendChild(o);
	}
})();


aaa.onchange = function (e) {
	bbb.style.display = 'inline-block'; 
	while (bbb.children.length > 1) {
		bbb.removeChild(
			bbb.lastElementChild
		);
	}
	while (ccc.children.length > 1) {
		ccc.removeChild(
			ccc.lastElementChild
		);
	}
	if (bData[this.value]) {
		var len = bData[this.value].length;
		input2.value = aData[this.value];
		for (var i = 0; i < len; i++) {
			var o = document.createElement('option');
			o.innerHTML = bData[this.value][i];
			o.value = i;
			bbb.appendChild(o);
		}
	}
};


bbb.onchange = function (e) {
	ccc.style.display = 'inline-block';
	while (ccc.children.length > 1) {
		ccc.removeChild(
			ccc.lastElementChild
		);
	}
	if (cData[aaa.value][this.value]) {
		var len = cData[aaa.value][this.value].length;
		input2.value = bData[aaa.value][this.value];
		for (var i = 0; i < len; i++) { 
			var o = document.createElement('option');
			o.innerHTML = cData[aaa.value][this.value][i];
			o.value = i;
			ccc.appendChild(o);
		}
	}
}


ccc.onchange = function(e){
	input2.value = cData[aaa.value][bbb.value][this.value];
}
</script>

运行结果