Скрыть незаполненные селекты

[Gigabajt]

Ребя, помогите скрыть пустые выпадающие списки.
Дело в том что с самого начала задается определенное количество списков

<select size="1" id="List1" name="a1">
<option value="m1"> Автобусы </option>
</select>
<!— Подчиненный список 1 (изначально пуст) —>
<select size="1" id="List2" name="a2"></select>
<!— Подчиненный список 2 (изначально пуст) —>
<select size="1" id="List3" name="a3"></select>

Первый список заполнен, а остальные нет. Так вот, через js подчиненные списки динамически заполняются, в зависимости от того что выбрано в главном списке (a1). Но иногда, например, подчиненный "a3" остается пустым, а на странице он все-равно отображается (Скрин).
Как его скрывать, если он не заполнен?

Весь код

<!-- Первый (главный) список (изначально заполнен вручную) -->
<select size="1" id="List1" name="a1">
<option value="m1"> Автобусы </option>
<option value="m2"> Экскаваторы </option>
<option value="m3"> Погрузчики </option>
</select>
<br>

<!-- Подчиненный список 1 (изначально пуст) -->
<select size="1" id="List2" name="a2"></select>
<br>
<!-- Подчиненный список 2 (изначально пуст) -->
<select size="1" id="List3" name="a3"></select>
<br>
<input type= "submit" value= "Отправить">


<script type="text/javascript">
// Создаем новый объект связанных списков
var syncList1 = new syncList;

// Определяем значения подчиненных списков (2 и 3 селектов)
syncList1.dataList = {

/* Определяем элементы второго списка в зависимости
от выбранного значения в первом списке */

'm1':{
'm1_mm1':'VOLVO 8500',
'm1_mm2':'VOLVO 9700',
'm1_mm3':'VOLVO 9900',
'm1_mm4':'VOLVO B10',
'm1_mm5':'VOLVO B6',
'm1_mm6':'VOLVO B7',
'm1_mm7':'VOLVO Carrus'
},

'm2':{
'm2_mm1':'экскаваторы-погрузчики',
'm2_mm2':'мини-экскаваторы',
'm2_mm3':'колесные экскаваторы',
'm2_mm4':'гусеничные экскаваторы',
'm2_mm5':'VOLVO Carrus'
},

'm3':{
'm3_mm1':'фронтальные погрузчики',
'm3_mm2':'минипогрузчики'
},

/* Определяем элементы третьего списка в зависимости
от выбранного значения во втором списке */



'm2_mm1':{
'm2_mm1_n1':'VOLVO BL',
'm2_mm1_n2':'VOLVO BL 61',
'm2_mm1_n3':'VOLVO BL 70',
'm2_mm1_n4':'VOLVO BL 71',
'm2_mm1_n5':'VOLVO BM 6300'
},

'm3_mm1':{
'm3_mm1_n1':'версия 5'
},

'safari_mac':{
'safari_mac_1':'версия 1',
'safari_mac_2':'версия 2'
}
};

// Включаем синхронизацию связанных списков
syncList1.sync("List1","List2","Lis t3");
</script>

[Fenex]

Вот, взгляните:
http://jsfiddle.net/Fenex/F4C38/

[Gigabajt]

Кажется не то.

Посмотрите

<!-- Подчиненный список 2 (изначально пуст) -->
  <select size="1" id="List3" name="a3"></select>
  <br>
  <input type= "submit" value= "Отправить"> 
  
  
<script type="text/javascript">

 //функция проверяет необходимость скрыть или показать список
    function check() {
        
if (List3.firstChild=='') {
 List3.style.display="none";
}

    }

check();
// Включаем синхронизацию связанных списков
syncList1.sync("List1","List2","List3");



</script>

Почему может не работать?
Нужно чтобы скрипт скрывал селект с ид'ом List3, который пустой, но он не скрывается

[Metandrostenalon]

Проверяй состояние через 2 список

document.getElementById('List2').addEventListener('change', function() {
  var list = document.getElementById('List3');
  if (!list.selectedIndex) {
    list.style.display = 'none';
    return;
  }
  list.style.display = 'block';
});