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

Gock · Регистрация: 28.04.2006

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

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

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

JS Код:

<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>

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

JS Код:

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) все равно ничего не передается.

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

Gock · 03.10.2012, 22:51

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

JS Код:

<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>? Сделал так, как нарыл в инете - работает не так, как мне нужно)

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
не работает select	Jos1k	MSSQL Server	0	05.02.2012 22:22
Запрос select!!!!	Polly1990	SQL	1	05.07.2011 11:28
Нужно связать DBGrid c Memo u Image	imported_Хим	Вопросы начинающих программистов	1	23.06.2011 19:27
Select max минимальная раскраска	iversonNV	Алгоритмы	2	29.12.2010 13:19
Нужно связать TreeView c Базой данных	sharovia	C++ Builder	15	23.05.2006 08:55
Select Case	kminas	Visual Basic	4	06.03.2006 23:07
QDataTable и select как их связать	Alex437	Trolltech Qt	5	08.12.2005 10:31
События при открытом SELECT	Ingwarr	DHTML, JavaScript, VBScript	4	12.10.2005 10:42
Когда столбец проходит через select, select перекрывает этот столбец как исправить	PriesT	DHTML, JavaScript, VBScript	1	14.09.2005 16:43
как работать с select	dipsy	PHP	4	04.05.2005 21:04
select - user()	Anonymous	PHP	8	30.01.2004 14:22

Ads