Нужно связать select в нескольких div

[fs444]

У меня сейчас есть такая страничка:
Три <select>, каждый из которых в своем <div> (примечание: кол-во select'ов растет по кнопке "Вперед", но пока пусть их будет три). Сейчас выбрано "автобус", "самолет" и "поезд". Мне нужно, чтобы при выборе в строке №1 самолета вместо автобуса стоящий справа select тоже менялся. А при выборе во 2й строке поезда в правом select'е появлялись опции для поезда.

Сейчас все три левых select'а добавляют новый select справа только в первой строчке (пока правые select'ы появляются друг за другом; хотя надо, чтобы следующий убивал предыдущий и занимал его место; но щас вопрос не в этом, потом разберусь). Это происходит потому, что мне не удается передать в функцию make_bus_option() или make_air_option() или make_train_option() id div'а, в котором расположен левый select, обработчик пункта option которого сработал.

Вот код страницы

<script type='text/javascript'>
var div_id_count = '1';
var select_id_count = '1';
function make_bus_option()
{
    var bus_option_select = document.createElement('select');
    bus_option_select.innerHTML = '<select><option>Выберите номер автобуса...</option><option>Автобус 1</option><option>Автобус 2</option><option>Автобус 3</option></select>';
    document.getElementById(new_div_id).appendChild(bus_option_select);
}
function make_air_option()
{
    var air_option_select = document.createElement('select');
    air_option_select.innerHTML = '<select><option>Выберите номер самолета...</option><option">Самолет 1</option><option>Самолет 2</option><option>Самолет 3</option></select>';
    document.getElementById(new_div_id).appendChild(air_option_select);
}
function make_train_option()
{
    var train_option_select = document.createElement('select');
    train_option_select.innerHTML = '<select><option>Выберите номер поезда...</option><option">Поезд 1</option><option>Поезд 2</option><option>Поезд 3</option></select>';
    document.getElementById(new_div_id).appendChild(train_option_select);    
}
function make_new_transport()
{
    var new_div = document.createElement('div');        
    new_div_id = new_div.id = 'div' + div_id_count;
    var new_select = document.createElement('select');
    new_select.id = 'transport_type' + select_id_count;
    
    new_select.innerHTML = '<select><option>Выберите вид транспорта...</option><option onclick="make_bus_option()">Автобус</option><option onclick="make_air_option()">Самолет</option><option onclick="make_train_option()">Поезд</option></select>';
    
    document.getElementById('form1').appendChild(new_div);
    document.getElementById(new_div.id).appendChild(new_select);
    
    div_id_count++;
    select_id_count++;
}
</script>
<form id='form1'>
    <input type='button' value='Вперед' onclick='make_new_transport();'>
</form>

Я пробовал писать так

new_select.innerHTML = '<select><option>Выберите вид транспорта...</option><option onclick="make_bus_option(' + new_div_id + ')">Автобус</option><option onclick="make_air_option()">Самолет</option><option onclick="make_train_option()">Поезд</option></select>';

но в make_bus_option(new_div_id) все равно ничего не передается.

Кто знает, как решить вопрос этим или другим способом?

[fs444]

По советам добрых людей переписал так

<script type='text/javascript'>

var div_id_count = '1';
var select_id_count = '1';

function make_bus_option()
{
	for (var doc = document, bus_select = doc.createElement('select'), j = 0; j < 4; j++)
	{
		var bus_option = doc.createElement('option');
		bus_option.appendChild (doc.createTextNode(j ? 'Автобус ' + j : 'Выберите номер автобуса...'));
		bus_select.options.add(bus_option);
	}
	doc.getElementById(new_div_id).appendChild(bus_select);
}

function make_air_option()
{
	for (var doc = document, air_select = doc.createElement('select'), j = 0; j < 4; j++)
	{
		var air_option = doc.createElement('option');
		air_option.appendChild(doc.createTextNode(j ? 'Самолет ' + j : 'Выберите номер самолета...'));
		air_select.options.add(air_option);
	}
	doc.getElementById(new_div_id).appendChild(air_select);
}

function make_train_option()
{
	for (var doc = document, train_select = doc.createElement ('select'), j = 0; j < 4; j++)
	{
		var train_option = doc.createElement('option');
		train_option.appendChild(doc.createTextNode(j ? 'Поезд ' + j : 'Выберите номер поезда...'));
		train_select.options.add(train_option);
	}
	doc.getElementById(new_div_id).appendChild(train_select);
}

function make_new_transport()
{
	var new_div = document.createElement('div');		
	new_div_id = new_div.id = 'div' + div_id_count;
	var new_select = document.createElement('select');
	new_select.id = 'transport_type' + select_id_count;	
	
	var transport_type_option = document.createElement('option');
	transport_type_option.appendChild(document.createTextNode('Выберите вид транспорта...'));
	new_select.options.add(transport_type_option);
	var transport_type_option = document.createElement('option');
	transport_type_option.id = 'bus';	
	transport_type_option.appendChild(document.createTextNode('Автобус'));
	new_select.options.add(transport_type_option);
	var transport_type_option = document.createElement('option');
	transport_type_option.id = 'air';
	transport_type_option.appendChild(document.createTextNode('Самолет'));
	new_select.options.add(transport_type_option);
	var transport_type_option = document.createElement('option');
	transport_type_option.id = 'train';
	transport_type_option.appendChild(document.createTextNode('Поезд'));
	new_select.options.add(transport_type_option);	
	
	document.getElementById('form1').appendChild(new_div);
	document.getElementById(new_div.id).appendChild(new_select);
	
	//только как повесить на <option>Автобус</option> обработчик onclick="make_bus_option()"?
	//это срабатывает сразу при создании <select>, даже без выбора "автобуса"
	//document.getElementById('bus').addEventListener('onclick', make_bus_option());
	
	/*
	new_select.innerHTML = '<select><option>Выберите вид транспорта...</option><option onclick="make_bus_option()">Автобус</option><option onclick="make_air_option()">Самолет</option><option onclick="make_train_option()">Поезд</option></select>';
	
	document.getElementById('form1').appendChild(new_div);
	document.getElementById(new_div.id).appendChild(new_select);
	*/
	
	
	div_id_count++;
	select_id_count++;
}
</script>

<form id='form1'>
	<input type='button' value='Вперед' onclick='make_new_transport();'>
</form>

Только как цеплять onclick на <option>? Сделал так, как нарыл в инете - работает не так, как мне нужно)