Tweet
Hi Guys,
I am busy with 2 interdependant <select> boxes, and what i want to do with them is this. I have variables which populate the fields in the second select box when a certain optin in the first one is selected. When the first select box has been selected, i want the second one to default to the first option, showing the <div> element that is associated with it.
I am busy modifying it, so excuse the fact that the variable names dont relate to the content
Any ideas?
I am busy with 2 interdependant <select> boxes, and what i want to do with them is this. I have variables which populate the fields in the second select box when a certain optin in the first one is selected. When the first select box has been selected, i want the second one to default to the first option, showing the <div> element that is associated with it.
I am busy modifying it, so excuse the fact that the variable names dont relate to the content
Any ideas?
Code:
<script type="text/javascript">
var teams = [
["AdvanceSMS Information"],
["AdvanceMobility Information"],
];
function fillTeams(selSport){
var idx = selSport.selectedIndex, newOpt;
clearTeamsPlayersLists();
if(idx == 0) {
return;
}
currSport = --idx;
oSelTeams.options[oSelTeams.options.length] = new Option('Select an Option','',false,false);
for(i=0; i < teams[idx].length; i++){
oSelTeams.options[oSelTeams.options.length] = new Option(teams[idx][i],'',false,false);
}
}
function fillPlayers(selTeam){
infO.style.display = 'none';
var idx = selTeam.selectedIndex, newOpt, optsToUse;
if(idx == 0) {
oSelPlayers.options.length = 0;
return;
}
oSelPlayers.options.length = 0;
--idx;
switch (currSport) {
case 0:
optsToUse = 1;
break;
case 1:
optsToUse = 2;
break;
}
}
function clearTeamsPlayersLists(){
oSelTeams.options.length = 0;
infO1.style.display = 'none';
infO2.style.display = 'none';
side1.style.display = 'none';
side2.style.display = 'none';
}
window.onload=function(){
infO1 = document.getElementById('advancesms');
infO2 = document.getElementById('advancemobility');
side1 = document.getElementById('side1');
side2 = document.getElementById('side2');
document.getElementById('theSport').onchange=function(){
fillTeams(this);
}
oSelTeams = document.getElementById('theTeams');
oSelTeams.onchange=function(){
infO1.style.display = 'none';
infO2.style.display = 'none';
side1.style.display = 'none';
side2.style.display = 'none';
if(this.options[this.selectedIndex].innerHTML == 'AdvanceSMS Information'){
infO1.style.display = 'block';
side1.style.display = 'block';
}
if(this.options[this.selectedIndex].innerHTML == 'AdvanceMobility Information'){
infO2.style.display = 'block';
side2.style.display = 'block';
}
}
}
</script><hr />
<h3 class="title">Browse our solution offerings</h3>
<table><tr><td width="265"><strong><h4>Category</h4></strong></td><td width="15"> </td><td width="265"><strong><h4>Additional</h4></strong></td></tr></table><hr />
<form>
<select id="theSport" size="6">
<option>Choose a Category</option>
<option>AdvanceMobility</option>
<option>AdvanceSMS</option>
</select>
<select id="theTeams" size="6"></select>
</form>
<div id="advancesms" style="display:none;"><h3 class="title">AdvanceMobility</h3><p>TEXT HERE</p></div>
<div id="advancemobility" style="display:none;"><h3 class="title">AdvanceSMS</h3><p>TEXT HERE</p></div>
Comment