Для реализации интерфейсной части скриpта используется следующая HTML конструкция
<FORM NAME="koktail">
<TABLE WIDTH="750px" ALIGN="center" BGCOLOR="AAAAAA">
<TR>
<TD ALIGN="right" WIDTH="50%">
Компонеты:
<SELECT NAME="comp" SIZE="11" MULTIPLE onChange="javascript:componclick();">
</SELECT>
</TD>
<TD ALIGN="left">
Коктейли:
<SELECT NAME="kokt" SIZE="11" onChange="javascript:koktonclick();">
</SELECT>
</TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN="center">
Рецепт:
<TEXTAREA NAME="res" COLS=40 ROWS=10 onFocus="javascript:koktail.res.blur();">
</TEXTAREA>
</TD>
</TR>
</TABLE>
</FORM>


Она содержит форму с именем koktail внутри которой расположены два списка comp и kokt для выбора игридиентов и наименований коктейлей. Также на форме расположено текстовое поле res для вывода рецептов.

При загрузке страницы выполняется следующий скрипт для инициализации переменных, а также начального заполнения списков

	initbase(); 
	numcomp=getcomp();
	ind=getind();
	recept=getrecept();
	title=gettitle();
	numcomp1=new Array(numcomp.length); 
	numkokt  =new Array(title.length); 
	oOptionComp = new Array(numcomp.length);
	for(i=0;i<numcomp.length;i+=1)
	{
		oOptionComp[i]=document.createElement("OPTION");
		koktail.comp.options.add(oOptionComp[i]);
		oOptionComp[i].innerText=numcomp[i];
		oOptionComp[i].value=i;
	}  
	oOptionKokt = new Array(numcomp.length);
	for(i=0;i<title.length;i+=1)
	{
		oOptionKokt[i]=document.createElement("OPTION");
		koktail.kokt.options.add(oOptionKokt[i]);
		oOptionKokt[i].innerText=title[i];
		oOptionKokt[i].value=i;
		numkokt[i]=i;
	}  
          

Функция initbase() выполняет заполнение полей массивов numcomp, ind, recept, title, содержащих текстовую базу коктейлей. После ее вызова производится создание буферных массивов numcomp1, numkokt, oOptionComp и oOptionKokt, а затем начальное заполнение списков comp и kokt.

Списки comp и kokt имеют обработчики событий onChange, которое возникает при изменении выделения в списке Для списка comp установлен обработчик componclick, который выбирает из базы наименования тех коктейлей, которые содержат выбранные ингридиенты, и заносит их в список kokt.
Его исходный код:

	function componclick()
	{
	N=0;
	for(i=0;i<oOptionComp.length;i++)
	{
		if(koktail.comp.options[i].selected)
		{
			numcomp1[N]=i+1;
			N++;
		}
	}
	N1=0;
	for(i=0;i<title.length;i++)
	{
	fl=0;
	for(j=0;j<N;j++)
                     {
		for(k=0;ind[i][k]!=0;k++)
			if(numcomp1[ j ]==ind[i][k])
				fl++;
		if(fl==N)
		{
			numkokt[N1]=i;
			N1++;
		}
	}
	}
	while(koktail.kokt.options.length>0)
		koktail.kokt.remove(0);
	for(i=0;i<N1;i++)
	{
		oOptionKokt[i]=document.createElement("OPTION");
		koktail.kokt.options.add(oOptionKokt[i]);
		oOptionKokt[i].innerText=title[numkokt[i]];
		oOptionKokt[i].value=i;
                                                 
	}
	}
         

Для списка kokt установлен обработчик koktonclick, который выбирает из базы рецепт, соответствующий выбранному коктейлю, и помещает его в поле res.
Его исходный код:

	function koktonclick()
	{
		ii=koktail.kokt.selectedIndex;
		koktail.res.value=recept[numkokt[ii]];
	}
         

На главную