Форум PHP программистов > 3 связанных списка

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Лена

13.03.2011 - 20:19

Есть три списка. Первый- основной, значения второго зависят от первого, значения третьего - от второго.

В html это выглядит так:


Расположение блоков: <br />
<select name="main_items" onChange="SubList(this.selectedIndex,'sub_items');">
<option value="0">выбрать</option>
<option value="1">по разные стороны от контента</option>
<option value="2">по одну сторону от контента</option>
<option value="3">один из блоков внизу</option>
<option value="4">оба блока внизу</option>
</select>

<select name="sub_items" style="display:none;" id="sub_items" onChange="SubList(this.selectedIndex,'sub_items2');">
</select>

<select name="sub_items2" style="display:none;" id="sub_items2">
</select>

Списками занимается SubList():

var subValues = new Array(
"",
"блок навигации справа,блок навигации слева",
"блоки справа от контента, блоки слева от контента, один блок над другим",
"",
"");

var subValues2 = new Array(
"",
"блок навигации справа, блок навигации слева",
"блок навигации справа, блок навигации слева",
"блок навигации сверху, блок навигации снизу"
);

//bild list
function SubList(index,sub){

    var subVal = subValues[index].split(",");

    var length = subVal.length;

    var oSubList = document.forms["tpl"].elements[sub];

    oSubList.length = 0; // delete item from sub list

    for (i = 0; i < length; i++){
        // add item to the sublist
        if (document.createElement){
            var newSubListOption = document.createElement("option");
            newSubListOption.text = subVal[i];
            newSubListOption.value = subVal[i];

            // method IE or DOM
            (oSubList.options.add) ? oSubList.options.add(newSubListOption) : oSubList.add(newSubListOption, null);

			var t = document.getElementById(sub);

            if(subVal[i] !=""){

					 t.style.display = 'inline';
			}else{
				      t.style.display = 'none';
			}
        }
    }
}

Сейчас функция строит второй список, который зависит от первого. Как можно минимально изменить функцию, чтобы добавить зависимость третьего списка от второго?
Т.е. чтобы не писать, допустим в функции
var subVal2 = subValues2[index].split(",");

var length2 = subVal2.length;

var oSubList2 = document.forms["tpl"].elements[sub];

А как-то по-другому сделать входящий параметр, чтобы одна и та же функция строила третий список.

Спустя 10 минут, 21 секунда (13.03.2011 - 19:29) neadekvat написал(а):

Фреймворки (н-р, jquery) не хотите использовать? А то я так давно не писал на чистом js, что со скрежетом понимаю его.

Спустя 7 минут, 55 секунд (13.03.2011 - 19:37) Лена написал(а):

Хочу всё)) лишь бы работало. Сайт, к которому это дописываю, сплошь и рядом в одном jquery, так что это тоже подойдет.

С другой стороны, хотелось бы увидеть, как можно правильно мой скрипт дописать. Зачем тянуть целый фреймворк, если тут, вдруг, пару строчек придется добавить, и все будет работать.

Спустя 26 минут, 39 секунд (13.03.2011 - 20:04) Trianon написал(а):

Лена

Цитата

Хочу всё)) лишь бы работало.

Ох, не доведет такое до добра...

Спустя 12 минут, 43 секунды (13.03.2011 - 20:17) neadekvat написал(а):

Примерно так.

var subValues = [];
subValues[1] = [
    'блок навигации справа',
    'блок навигации слева'
];
subValues[2] = [
    'блоки справа от контента',
    'блоки слева от контента',
    'один блок над другим'
];

var subValues2 = [];
subValues2[0] = subValues2[1] = [
    'блок навигации справа',
    'блок навигации слева'
];
subValues2[2] = [
    'блоки справа от сверху',
    'блоки слева от снизу'
];


function SubList(index, sub)
{
    select = $('#' + sub);
    options = '';
    
    // Сначала узнаем, какой массив значений надо использовать
    values = (sub == 'sub_items') ? subValues : subValues2;
    
    // Очищаем список и скрываем его
    if (values[index] == null) {
        select.empty().hide();
        // Не забываем очистит и закрыть последний уровень
        if (sub == 'sub_items')
            $('#sub_items2').empty().hide();
        
        return;
    }
    
    size = values[index].length;
    for (i = 0; i < size; i++)
        options += '<option value="'+ i +'">'+ values[index][i] +'</option>';
    
    select.show().empty().append(options);    
}

Спустя 2 минуты, 52 секунды (13.03.2011 - 20:20) CyberOrcX написал(а):

var length = subVal.length;

length - не зарезервированное слово JavaScript? )

for (i = 0; i < length; i++) //то же самое

можно
например,

var valLength = subVal.length;

for (i = 0; i < valLength; i++)

Спустя 1 час, 3 минуты, 7 секунд (13.03.2011 - 21:23) Лена написал(а):

neadekvat

Посмотрела. Работает.
Вопрос:
select.show().empty().append(options);
Зачем здесь чистить селект? Мы ж его очистили выше.

Trianon
>Ох, не доведет такое до добра...

I repent,sensei )

Спустя 1 минута, 39 секунд (13.03.2011 - 21:24) neadekvat написал(а):

Цитата (Лена @ 13.03.2011 - 18:23)

Зачем здесь чистить селект? Мы ж его очистили выше.

Уберите очистку и попробуйте выбирать поочередно второй и третий пункты из первого списка. Второй список будет расширяться до бесконечности.

Спустя 5 минут, 6 секунд (13.03.2011 - 21:29) Лена написал(а):

Спасибо, поняла.

Спустя 1 день, 19 часов, 42 минуты, 5 секунд (15.03.2011 - 17:11) Лена написал(а):

Обнаружила баг, который не знаю, как исправить.

Сейчас третий уровень появляется у всех элементов второго уровня, а надо, чтобы он был только у subValues[2] .

Ставлю проверку, чтобы скрыть ненужные:


    for (i = 0; i < size; i++)

        options += '<option value="'+ i +'">'+ values[index][i] +'</option>';

     if(sub == 'sub_items' && index != 2)
                //$('#sub_items2').empty().hide();

Помогите, пожалуйста.

Спустя 54 минуты, 51 секунда (15.03.2011 - 18:06) neadekvat написал(а):

var SubListIndex = 0; // Новая переменная

var subValues = [];
subValues[1] = [
    'блок навигации справа',
    'блок навигации слева'
];
subValues[2] = [
    'блоки справа от контента',
    'блоки слева от контента',
    'один блок над другим'
];

var subValues2 = [];
subValues2[0] = subValues2[1] = [
    'блок навигации справа',
    'блок навигации слева'
];
subValues2[2] = [
    'блоки справа от сверху',
    'блоки слева от снизу'
];


function SubList(index, sub)
{
    select = $('#' + sub);
    options = '';
    $('#sub_items2').empty().hide();
    
    // Добавленная часть
    if (sub == 'sub_items') {
        SubListIndex = index;
        values = subValues;
    } else if (sub == 'sub_items2') {
        if (SubListIndex == 1)
            return;
        values = subValues2;
    }
    
    // Очищаем список и скрываем его
    if (values[index] == null) {
        select.empty().hide();
        // Не забываем очистит и закрыть последний уровень
        if (sub == 'sub_items')
            $('#sub_items2').empty().hide();
        
        return;
    }
    
    size = values[index].length;
    for (i = 0; i < size; i++)
        options += '<option value="'+ i +'">'+ values[index][i] +'</option>';
        
    select.show().empty().append(options);
    
    
    // Создаем список третьего уровня
    if (sub == 'sub_items' && SubListIndex == 2)
        SubList(1, 'sub_items2');
}

Словами опишу, что сделал: ввел переменную, в которой хранится индекс выбранного первого поля. Если он равен 1 - то третего блока быть не может.
Кроме этого, в конце функции добавил вызов этой же функции с параметрами создания третьего уровня, т.к. без этого вроде как третий список должен быть, но ведь события onchange не происходит, и он не создается.

Спустя 19 часов, 8 минут, 32 секунды (16.03.2011 - 13:15) Лена написал(а):

Виталик, спасибо, вроде как поняла.
Только там нужно if (SubListIndex == 1 || SubListIndex == 3 || SubListIndex == 4)

чтобы если выбираешь 3 и 4 элементы во втором списке третий не появлялся. Иначе появляется третий уровень.

У меня сейчас код такой:


var SubListIndex = 0; // add var

var subValues = [];
subValues[1] = subValues[4] = [
    'блок навигации справа',
    'блок навигации слева'
];
subValues[2] = [
    'блоки справа от контента',
    'блоки слева от контента',
];

subValues[3] = [
    'блок навигации вверху справа',
    'блок навигации вверху слева'
];

var subValues2 = [];

subValues2[0] = subValues2[1] = [
    'блок навигации слева',
    'блок навигации справа',
    'один блок над другим'
];

function SubList(index, sub){

	select = $('#' + sub);
	options = '';

	$('#sub_items2').empty().hide();

	// Добавленная часть
	if (sub == 'sub_items'){
		SubListIndex = index;
		values = subValues;
	}else if(sub == 'sub_items2'){
	     if (SubListIndex == 1 || SubListIndex == 3 || SubListIndex == 4)
	     	return;

	     values = subValues2;
	}

	 //clear the list and hide it
	if (values[index] == null) {
		select.empty().hide();

     //clean up and close the last level
	if (sub == 'sub_items')
			$('#sub_items2').empty().hide();

	return;
	}

	size = values[index].length;

	for (i = 0; i < size; i++)
		options += '<option value="'+ i +'">'+ values[index][i] +'</option>';

	select.show().empty().append(options);

	// create third level list
	if (sub == 'sub_items' && SubListIndex == 2){
					SubList(1, 'sub_items2');
	}
}

И наверное, сделаю ,чтобы значения не с нуля считались:
options += '<option value="'+ (i+1) +'">'+ values[index][i] +'</option>';

Спустя 1 час, 26 минут, 49 секунд (16.03.2011 - 14:42) neadekvat написал(а):

Цитата (Лена @ 16.03.2011 - 13:15)

И наверное, сделаю ,чтобы значения не с нуля считались:

А чем не устраивает с нуля?
Просто тут есть риск запутаться, что к чему.

Спустя 1 час, 47 минут, 21 секунда (16.03.2011 - 16:29) Лена написал(а):

Мне в обработчике эти значения надо на пустоту проверять.
Я вообще-то через empty() делаю, а если будет 0, как тогда?
Получается надо еще один элемент в списке добавлять, значение которого = -1.
Например:
- выберите блок
- блок справа
- блок слева
И тогда индексы, которые в функции используются сместятся, тоже будет неразбериха.

Спустя 5 минут, 22 секунды (16.03.2011 - 16:34) neadekvat написал(а):

Так это ж список, и если там что-то не по плану - значит, кто-то играется. Можно сделать просто:

$index = isset($_POST['index']) ? (int) $_POST['index'] : 0;
А то и вообще
$index = (int) @$_POST['index'];

Быстрый ответ:

Здесь расположена полная версия этой страницы.