Сообщение от T-sh
|
ну вот пример с обычными списками:
http://htmlweb.ru/ajax/example/region.php
там очень хорошо расписано всё..
с html списками я погорячился, начинающему трудновато будет реализовать. попробуйте для начала этот вариант, он проще для понимания. а потом уже по этому же принципу заменяйте <select><option>Пункт списка</option></select> на <ul><li>Пункт списка</li></ul>
|
Спасибо. Попробую вариант с ajax с последующей заменой. Я в принципе ajax уже просматоивал, но что то мне показалось накрученным все. Просто смотрю на скрипт меню с подгруппами вот к примеру этот что ниже, ну вот фактически готовое решение, не хватает только вместо перехода на другой урл прикрепить переход на раскрывающее поле....а как грамотно сделать пока не соображу. Можно из данного скрипта вместо переходов на урл сделать открывающее поле с информацией на этой же странице?
<Script Language="JavaScript">
var maxLength = 20;
website = new Array;
website[0] = "Категория - 1";
website[1] = "Категория - 2";
website[2] = "Категория - 3";
website[3] = "Категория - 4";
var trueLength = website.length;
var lst = website.length;
url = new Array;
url[0] = "#";
url[1] = "#";
url[2] = "#";
url[3] = "#";
url[4] = "#";
ccselect = new Array;
ccselect[0] = "Категория - 1";
ccselect[1] = "Категория - 2";
ccselect[2] = "Категория - 3";
ccselect[3] = "Категория - 4";
function changePage()
{menuNum = document.ccDoubleList.ccBitsyG.selectedIndex;
if (menuNum == null)
{alert("Please select a category from the menu.");
return;}
else
{i = document.ccDoubleList.ccDoubleZ.selectedIndex;
window.location.href = url[i];}}
function changeMenu()
{website.length = 0;
menuNum = document.ccDoubleList.ccBitsyG.selectedIndex;
if (menuNum == null) return;
if (menuNum == 0)
{website = new Array;
website[0] = new Option("Пункт 1.1");
website[1] = new Option("Пункт 1.2");
website[2] = new Option("Пункт 1.3");
website[3] = new Option("Пункт 1.4");
website[4] = new Option("Пункт 1.5");
url = new Array;
url[0] = "#";
url[1] = "#";
url[2] = "#";
url[3] = "#";
url[4] = "#";
}
if (menuNum == 1)
{website = new Array;
website[0] = new Option("Пункт 2.1");
website[1] = new Option("Пункт 2.2");
website[2] = new Option("Пункт 2.3");
website[3] = new Option("Пункт 2.4");
website[4] = new Option("Пункт 2.5");
url = new Array;
url[0] = "#";
url[1] = "#";
url[2] = "#";
url[3] = "#";
url[4] = "#";
}
if (menuNum == 2)
{website = new Array;
website[0] = new Option("Пункт 3.1");
website[1] = new Option("Пункт 3.2");
website[2] = new Option("Пункт 3.3");
website[3] = new Option("Пункт 3.4");
website[4] = new Option("Пункт 3.5");
url = new Array;
url[0] = "#";
url[1] = "#";
url[2] = "#";
url[3] = "#";
url[4] = "#";
}
if (menuNum == 3)
{website = new Array;
website[0] = new Option("Пункт 4.1");
website[1] = new Option("Пункт 4.2");
website[2] = new Option("Пункт 4.3");
website[3] = new Option("Пункт 4.4");
website[4] = new Option("Пункт 4.5");
url = new Array;
url[0] = "#";
url[1] = "#";
url[2] = "#";
url[3] = "#";
url[4] = "#";
}
tot = website.length;
for (i = lst; i > 0; i--)
{document.ccDoubleList.ccDoubleZ.options[i] = null;}
for (i = 0; i < tot; i++)
{document.ccDoubleList.ccDoubleZ.options[i] = website[i];}
document.ccDoubleList.ccDoubleZ.options[0].selected = true;
lst = website.length;}
</Script>
</Head>
<Body BgColor="#ffffff">
<Script Language="JavaScript">
with (document)
{writeln('<Center>');
writeln('<Table Border=0 CellSpacing=0 CellPadding=3>');
writeln('<Tr><Form Name="ccDoubleList"><Td Align=Left>');
writeln('<Font Face=Verdana,Tahoma,Arial Size=2 Color=#000000><B>Категория</B></Font><Br>');
writeln('<Select Name="ccBitsyG" onChange="changeMenu(this.form)">');
tot = ccselect.length;
for (i = 0; i < tot; i++)
writeln("<Option>" +ccselect[i]);
writeln("</Select>");
writeln('</Td><Td>');
writeln('<Font Face=Verdana,Tahoma,Arial Size=2 Color=#000000><B>Меню</B></Font><Br>');
writeln('<Select Name="ccDoubleZ">');
for (i = 0; i < maxLength; i++)
writeln("<OPTION>" +website[i]);
writeln("</Select>");
for (i = maxLength; i > trueLength; i--)
{ccDoubleList.ccDoubleZ.options[i] = null;}
writeln('</Td><Td Valign=bottom><A Href="javascript:changePage();">');
writeln('<Img src="picture.gif" Width=19 Height=14 Border=0></A>');
writeln('</Td></Tr>');
changeMenu();
writeln('</Form>');
writeln('</Table>');
writeln('</Center>');
}
</Script>