<!doctype html>
<select id="sel1">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<select id="sel2" style="display: none">
<option value="0">Пункт 101 </option>
<option value="0">Пункт 102</option>
<option value="0">Пункт 103 </option>
<option value="1">Пункт 201 </option>
<option value="1">Пункт 202 </option>
<option value="1">Пункт 203 </option>
<option value="2">Пункт 301 </option>
<option value="2">Пункт 302 </option>
<option value="2">Пункт 302 </option>
<option value="3">Пункт 401 </option>
<option value="3">Пункт 402 </option>
<option value="3">Пункт 403 </option>
</select>
<select id="sel2copy">
</select>
<select id="sel3">
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<script>
window.onload = function () {//onload begin
var sel1 = document.getElementById('sel1');
var sel2 = document.getElementById('sel2');
var sel3 = document.getElementById('sel3');
var sel2copy = document.getElementById('sel2copy');
var childs = sel2.options;
var len = sel2.options.length;
var index;
var setPoints = function () {
index = sel1.selectedIndex;
sel2copy.innerHTML = '';
for (var i = 0; i < len; i++) {
if (parseInt(childs[i].value) == index) {
sel2copy.appendChild(childs[i].cloneNode(true));
}
}
}
setPoints();
sel1.onchange = function () {
setPoints();
sel3.selectedIndex = sel1.selectedIndex;
}
}//onload end
</script>