dependent drop-downs

ptichka · Jul 22, 2003

Hello everybody,

I need help.
I have two drop down lists (each populated by it's own query). If the user selects an option in the first one, that should then effect the output of the list in the second drop-down. But I need all this to work with out my page being reloaded every time.

Does anyone have any suggestions for me?

Thanks in advance for any input.

vvlad · Jul 22, 2003

This might put you on the right track.

<body>
<table width = "80%"><tr>
<td width = "50%" valign = 'top'>
<span id = "chooseLanguage">Choose language:</span>
<br />
<br />
<select name = "language" onChange = "changeAllLang()">
<option value = "en">English</option>
<option value = "fr">French</option>
<option value = "de">German</option>
</select>
<br />
<br />
</td>
<td valign = 'top'>
<span id = "chooseColour">Choose colour:</span>
<br />
<br />
<select name = "colours" onChange = "changeAllCol()">
<option value = "red">Black</option>
<option value = "red">Red</option>
<option value = "green">Green</option>
<option value = "blue">Blue</option>
<option value = "yellow">Yellow</option>
</select>
</td>
</tr></table>

<script language = "JavaScript">

noLangs = colours.length;
var cL = new Array("Choose language:", "Choisir la langue:", "Sprache waehlen:&quot

;
var cC = new Array("Choose language:", "Choisir la couleur:", "Farbe waehlen:&quot

;

var clE = new Array("Black", "Red", "Green", "Blue", "Yellow&quot

;
var clF = new Array("Noir", "Rouge", "Vert", "Bleu", "Jaune&quot

;
var clG = new Array("Schwarz", "Rot", "Gruen", "Blau", "Gelb&quot

;

function changeAllLang()
{
which = language.selectedIndex;
chooseLanguage.innerText = cL[which];
chooseColour.innerText = cC[which];

for(i = 0;i < noLangs;i++)
// this has to be always "0", as the first element is always removed AND replaced automatically
colours.remove(0);

for(i = 0;i < noLangs;i++)
{
newOpt = document.createElement("OPTION&quot

;

// Here we can could have used associative arrays to shorten the code
if(which == 0)
{
newOpt.text = clE;
newOpt.value = clE.toLowerCase();
}
else if(which == 1)
{
newOpt.text = clF;
newOpt.value = clF.toLowerCase();
}
else
{
newOpt.text = clG;
newOpt.value = clG.toLowerCase();
}
colours.add(newOpt, i);
}
}

function changeAllCol()
{
which = colours.selectedIndex;

chooseColour.style.color = clE[which];
chooseLanguage.style.color = clE[which];
language.style.color = clE[which];
colours.style.color = clE[which];
}
</script>
</body>

vlad

ptichka · Jul 22, 2003

I am pretty new at JavaScript, so this might be easy stuff that I just don't know.
How do I user the results of my 2 queries to get my lists?

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!

dependent drop-downs

ptichka

Programmer

vvlad

Programmer

ptichka

Programmer

Similar threads

Part and Inventory Search

Sponsor