dpts,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hide{
display: none;
}
</style>
</head>
<body>
<!DOCTYPE HTML>
<html>
<head>
<title>Селекты</title>
</head>
<body>
<!-- Главный Селект -->
<select name="fio">
<option value="1">Иванов</option>
<option value="2">Петров</option>
<option value="3">Сидоров</option>
...
<option value="n">Нурсульфазолов</option>
</select>
<!-- Селект от Иванова -->
<select name="Child">
<option value="1">Сын Иван</option>
<option value="2">Дочь Маша</option>
...
<option value="n">Сын Петр</option>
</select>
<!-- Селект от Петрова -->
<select name="Child">
<option value="1">Сын Василий</option>
<option value="2">Сын Николай</option>
...
<option value="n">Дочь Катерина</option>
</select>
<!-- Селект от Сидорова -->
<select name="Child">
<option value="1">Сын Владимир</option>
<option value="2">Дочь Ольга</option>
...
<option value="n">Сын Михаил</option>
</select>
...
<!-- Селект от Нурсульфазолова -->
<select name="Child">
<option value="1">Сын Сергей</option>
<option value="2">Сын Кирилл</option>
...
<option value="n">Сын Алексей</option>
</select>
<script>
window.addEventListener('DOMContentLoaded', function() {
var fio = document.querySelector('[name="fio"]'),
child = document.querySelectorAll('[name="Child"]');
function change() {
val = this.value - 1;
[].forEach.call(child, function(sel, i) {
sel.classList[val == i ? "remove" : "add"]("hide")
});
}
fio.addEventListener('change', change);
change.call(fio)()
});
</script>
</body>
</html>
</body>
</html>