У меня сейчас есть такая страничка:
Три <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) все равно ничего не передается.
Кто знает, как решить вопрос этим или другим способом?