Компьютерный форум
Правила
Вернуться   Компьютерный форум > Форум программистов > Веб-программирование > DHTML, JavaScript, VBScript
Перезагрузить страницу Нужно связать select в нескольких div
Ответ
 
Опции темы Опции просмотра
  (#1 (permalink)) Старый
Gock Gock вне форума
Member
 
Сообщений: 306
Сказал(а) спасибо: 1
Поблагодарили 1 раз в 1 сообщении
Регистрация: 28.04.2006
По умолчанию Нужно связать select в нескольких div - 02.10.2012, 22:28

У меня сейчас есть такая страничка:
Три <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) все равно ничего не передается.

Кто знает, как решить вопрос этим или другим способом?
Ответить с цитированием
  (#2 (permalink)) Старый
Gock Gock вне форума
Member
 
Сообщений: 306
Сказал(а) спасибо: 1
Поблагодарили 1 раз в 1 сообщении
Регистрация: 28.04.2006
По умолчанию 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>? Сделал так, как нарыл в инете - работает не так, как мне нужно)
Ответить с цитированием
Ads
Ответ

Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Вкл.
Pingbacks are Вкл.
Refbacks are Выкл.


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
не работает 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



Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Нardforum.ru - компьютерный форум и программирование, форум программистов