In my html page I have three <sel 1

JeroenB · Apr 19, 2001

In my html page I have three <select> boxes; (this equals the three dimensions in my array). So once I have chosen a region, I should choose a country in the second one and the I should choose a city in the third...
But once I change back my region the other two <select> boxes should be resetted....so I can start over again...

I understand that I will have to define a three dimensional array; but as I'm not a great expert in javaScript I really can't figure out how to make the link between this array and the select boxes...

Can You help me out...
Thanks in advance

JeroenB

LnOrS · Apr 19, 2001

Hi,

Here is part of a code I've developed a few years ago. It only have two select boxes but... the algorithm is the same!
If you don't want to update the page each time you change the select, the information must be there!!
Hope it help... this is about Madeira Island (Portugal)

Code:

<HTML>


<HEAD>
  <META HTTP-EQUIV=&quot;Content-Type&quot;
   CONTENT=&quot;text/html; CHARSET=iso-8859-1&quot;>
  <TITLE>
    Madeira
  </TITLE>

  <SCRIPT Language=&quot;JavaScript&quot;>
  <!--

    function Localidades(form)
    {
      form.sloc.length = 1;
      form.sloc.selectedIndex = 0;
      cod_con = form.scon.options[form.scon.selectedIndex].value;
      if (cod_con == &quot;ca&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Calheta&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;cacaca&quot;;
      }
      if (cod_con == &quot;ca&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Ladeira e Lamaceiros&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;caacll&quot;;
      }
      if (cod_con == &quot;cl&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Câmara de Lobos&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;clclcl&quot;;
      }
      if (cod_con == &quot;cl&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Igreja&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;clecig&quot;;
      }
      if (cod_con == &quot;fn&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Caminho de São Martinho&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;fnfnsm&quot;;
      }
      if (cod_con == &quot;fn&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Funchal&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;fnfnfn&quot;;
      }
      if (cod_con == &quot;fn&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Funchal&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;fnfnfn2&quot;;
      }
      if (cod_con == &quot;fn&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Santo António&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;fnsasa&quot;;
      }
      if (cod_con == &quot;fn&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;São Lázaro&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;fnfnsl&quot;;
      }
      if (cod_con == &quot;fn&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;São Roque&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;fnsrsr&quot;;
      }
      if (cod_con == &quot;fn&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Torreão&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;fnfnto&quot;;
      }
      if (cod_con == &quot;ma&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Caniçal&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;macaca&quot;;
      }
      if (cod_con == &quot;ma&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Machico&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;mamama&quot;;
      }
      if (cod_con == &quot;pd&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Cerrado da Cruz&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;pdcacc&quot;;
      }
      if (cod_con == &quot;pd&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Livramento&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;pdpsli&quot;;
      }
      if (cod_con == &quot;pm&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Porto Moniz&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;pmpmpm&quot;;
      }
      if (cod_con == &quot;ps&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Porto Santo&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;pspsps&quot;;
      }
      if (cod_con == &quot;rb&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Ribeira Brava&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;rbrbrb&quot;;
      }
      if (cod_con == &quot;sc&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Camacha&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;sccaca&quot;;
      }
      if (cod_con == &quot;sc&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Caniço&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;sccncn&quot;;
      }
      if (cod_con == &quot;sc&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Garajau&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;sccnga&quot;;
      }
      if (cod_con == &quot;sc&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Igreja&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;sccaig&quot;;
      }
      if (cod_con == &quot;sc&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Santa Cruz&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;scscsc&quot;;
      }
      if (cod_con == &quot;sc&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Vargem&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;sccnvg&quot;;
      }
      if (cod_con == &quot;sa&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Achada de António Teixeira&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;sasjat&quot;;
      }
      if (cod_con == &quot;sa&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Igreja&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;sasaig&quot;;
      }
      if (cod_con == &quot;sa&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Santana&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;sasasa&quot;;
      }
      if (cod_con == &quot;sv&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;Lugar&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;svpdlu&quot;;
      }
      if (cod_con == &quot;sv&quot;)
      {
        (form.sloc.length)++;
        form.sloc.options[form.sloc.length - 1].text = &quot;São Vicente&quot;;
        form.sloc.options[form.sloc.length - 1].value = &quot;svsvsv&quot;;
      }
      
    }

    function LocIndxValue(forma)
    {
      forma.LocIndx.value = forma.sloc.selectedIndex;
      return true
    }

  //-->
  </script>

</HEAD>

<BODY BGCOLOR=&quot;#FFFFFF&quot; LINK=&quot;#0000FF&quot; TEXT=&quot;#0000FF&quot; VLINK=&quot;#00FF00&quot; ALINK=&quot;#00FFFF&quot;>

  <CENTER>
    <TABLE BORDER=&quot;0&quot; WIDTH=&quot;98%&quot; CELLSPACING=&quot;2&quot; CELLPADDING=&quot;2&quot;>
      <TR>
        <TD VALIGN=&quot;top&quot; ALIGN=&quot;left&quot;>
          <FORM METHOD=&quot;POST&quot; ACTION=&quot;ATM.asp&quot; NAME=&quot;formulario&quot;>
            <FONT FACE=&quot;Arial&quot; SIZE=&quot;3&quot; COLOR=&quot;#0000FF&quot;>
              <P ALIGN=&quot;justfy&quot;>
               <CENTER>Council
					<SELECT NAME=&quot;scon&quot; OnChange=&quot;Localidades(this.form)&quot; WIDTH=&quot;250&quot;>
						<OPTION VALUE = &quot;%&quot;>All</OPTION>
						<OPTION VALUE = &quot;ca&quot;>Calheta</OPTION>
						<OPTION VALUE = &quot;cl&quot;>Câmara de Lobos</OPTION>
						<OPTION VALUE = &quot;fn&quot;>Funchal</OPTION>
						<OPTION VALUE = &quot;ma&quot;>Machico</OPTION>
						<OPTION VALUE = &quot;pd&quot;>Ponta do Sol</OPTION>
						<OPTION VALUE = &quot;pm&quot;>Porto Moniz</OPTION>
						<OPTION VALUE = &quot;ps&quot;>Porto Santo</OPTION>
						<OPTION VALUE = &quot;rb&quot;>Ribeira Brava</OPTION>
						<OPTION VALUE = &quot;sc&quot;>Santa Cruz</OPTION>
						<OPTION VALUE = &quot;sa&quot;>Santana</OPTION>
						<OPTION VALUE = &quot;sv&quot;>S&atilde;o Vicente</OPTION>
					</SELECT>
					Places
					<SELECT NAME=&quot;sloc&quot; WIDTH=&quot;250&quot; OnChange=&quot;LocIndxValue(this.form)&quot;>
						<OPTION VALUE = &quot;%&quot;>All</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
						<OPTION VALUE = &quot;&quot;>000000000000000000000000</OPTION>
					</select>
               </CENTER>
              </P>
            </FONT>
          </FORM>
        </TD>
      </TR>


    </TABLE>
  </CENTER>

  <SCRIPT LANGUAGE = &quot;JavaScript&quot;>
  <!--
        document.formulario.sloc.length = 1;
        
  // -->
  </SCRIPT>

</BODY>

</HTML>

Regards,
Luís Silva

JeroenB · Apr 20, 2001

Hi,
I checked out your script and tried to make a 3d select option; but it seems I 've done something wrong; do You know what ,

Thanks in advance
Jeroenb

<HTML>

<HEAD>
<TITLE>Pavilions_list</TITLE>

<SCRIPT Language="JavaScript">
<!--

function Localidades(form)
{
form.pavilion.length = 1;
form.pavilion.selectedIndex = 0;
val_sec = form.section.options[form.section.selectedIndex].value;
if (val_sec == "be&quot

{
(form.pavilion.length)++;
form.pavilion.options[form.pavilion.length - 1].text = "Atomium";
form.pavilion.options[form.pavilion.length - 1].value = "Atomium";
}
if (val_sec == "be&quot

{
(form.pavilion.length)++;
form.pavilion.options[form.pavilion.length - 1].text = "Aluminium";
form.pavilion.options[form.pavilion.length - 1].value = "Aluminium";
}
if (val_sec == "be&quot

{
(form.pavilion.length)++;
form.pavilion.options[form.pavilion.length - 1].text = "Cheerful Belgium";
form.pavilion.options[form.pavilion.length - 1].value = "Cheerful Belgium";
}
if (val_sec == "be&quot

{
(form.pavilion.length)++;
form.pavilion.options[form.pavilion.length - 1].text = "Couture";
form.pavilion.options[form.pavilion.length - 1].value = "Couture";
}
if (val_sec == "fo&quot

{
(form.pavilion.length)++;
form.pavilion.options[form.pavilion.length - 1].text = "Brazil";
form.pavilion.options[form.pavilion.length - 1].value = "Brazil";
}
if (val_sec == "fo&quot

{
(form.pavilion.length)++;
form.pavilion.options[form.pavilion.length - 1].text = "Austria";
form.pavilion.options[form.pavilion.length - 1].value = "Austria";
}
if (val_sec == "fo&quot

{
(form.pavilion.length)++;
form.pavilion.options[form.pavilion.length - 1].text = "Cambodia";
form.pavilion.options[form.pavilion.length - 1].value = "Cambodia";
}
if (val_sec == "fo&quot

{
(form.pavilion.length)++;
form.pavilion.options[form.pavilion.length - 1].text = "Canada";
form.pavilion.options[form.pavilion.length - 1].value = "Canada";
}
if (val_sec == "co&quot

{
(form.pavilion.length)++;
form.pavilion.options[form.pavilion.length - 1].text = "Fauna";
form.pavilion.options[form.pavilion.length - 1].value = "Fauna";
}
if (val_sec == "co&quot

{
(form.pavilion.length)++;
form.pavilion.options[form.pavilion.length - 1].text = "Hall of Congo & Ruanda-Urundi";
form.pavilion.options[form.pavilion.length - 1].value = "Hall of Congo & Ruanda-Urundi";
}

}

function LocIndxValue(forma)
{
forma.LocIndx.value = forma.pavilion.selectedIndex;
return true
}

function Setparts(form)
{
form.part.length = 1;
form.part.selectedIndex = 0;
val_sec = form.section.options[form.section.selectedIndex].value;
val_pav = form.pavilion.options[form.pavilion.selectedIndex].value;
if ((val_pav == "Atomium&quot

&& (val_sec == "be&quot

)
{
(form.part.length)++;
form.part.options[form.part.length - 1].text = "part01";
form.part.options[form.part.length - 1].value = "part01";
}
if ((val_pav == "Aluminium&quot

&& (val_sec == "be&quot

)
{
(form.part.length)++;
form.part.options[form.part.length - 1].text = "part02";
form.part.options[form.part.length - 1].value = "part02";
}
}

function PartIndxValue(forma)
{
forma.PartIndx.value = forma.part.selectedIndex;
return true
}
//-->
</script>

</HEAD>

<BODY BGCOLOR="#FFFFFF" LINK="#0000FF" TEXT="#0000FF" VLINK="#00FF00" ALINK="#00FFFF">

<CENTER>
<TABLE BORDER="0" WIDTH="98%" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD VALIGN="top" ALIGN="left">
<FORM METHOD="POST" ACTION="ATM.asp" NAME="formulario">
<FONT FACE="Arial" SIZE="3" COLOR="#0000FF">
<P ALIGN="justfy">
<CENTER>section
<SELECT NAME="section" OnChange="Localidades(this.form)" WIDTH="250">
<OPTION VALUE = "">[select]</OPTION>
<OPTION VALUE = "be">Belgian section</OPTION>
<OPTION VALUE = "fo">Foreign section</OPTION>
<OPTION VALUE = "co">Congo-Ruanda-Urundi</OPTION>
</SELECT>
pavilion
<SELECT NAME="pavilion" WIDTH="250" OnChange="LocIndxValue(this.form); Setparts(this.form)">
<OPTION VALUE = "">[select]</OPTION>
<OPTION VALUE = "">000000000000000000000000</OPTION>
</select>
part
<SELECT NAME="part" WIDTH="250" OnChange="PartIndxValue(this.form)">
<OPTION VALUE = "">[select]</OPTION>
<OPTION VALUE = "">000000000000000000000000</OPTION>
</select>
</CENTER>
</P>
</FONT>
</FORM>
</TD>
</TR>

</TABLE>
</CENTER>

<SCRIPT LANGUAGE = "JavaScript">

</SCRIPT>

</BODY>

</HTML>

LnOrS · Apr 20, 2001

Hi,

Try this:
<SELECT NAME="pavilion" WIDTH="250" OnChange="Setparts(this.form)">
You only change one select at the time so you only need one function to change the information!!

Regards,
Luís Silva

JeroenB · Apr 21, 2001

Hi,

I still have a prob within my script;
namely;
now I have three select boxes; But it can be possible that I only have to use 2 of the 3 (so I do not have any "parts&quot

. The problem is now that when doing so, the third box should be resetted (because now the last value remains standing there as it has not been replaced with another one...)
How can I add this to this script ?

Thanks in advance
JeroenB

LnOrS · Apr 23, 2001

Hi,

OK! You're right! You havo to add something when you change the first selection!

Code:

function Localidades(form)
{
  form.pavilion.length = 1;
  form.pavilion.selectedIndex = 0;
  form.part.length = 1;
  form.part.selectedIndex = 0;
   ...

When you make changes in the first select the last one will be reseted, and its length should be one!!
Hope this works.

Regards,
Luís Silva

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

In my html page I have three <sel 1

JeroenB

Programmer

LnOrS

Programmer

JeroenB

Programmer

LnOrS

Programmer

JeroenB

Programmer

LnOrS

Programmer

Similar threads

Part and Inventory Search

Sponsor

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

In my html page I have three &lt;sel 1

JeroenB

Programmer

LnOrS

Programmer

JeroenB

Programmer

LnOrS

Programmer

JeroenB

Programmer

LnOrS

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor

In my html page I have three <sel 1