Home >> Tutorials >> Javascript tutorials
This is an advanced combo script that uses two boxes, one as the main categories, the other as the links associated with each category.Insert the below into the <body> section of your page:
<form name="comboform">
<select name="firstcombo" size="1" onChange="replace(this.options.selectedIndex)">
<option>Travel Sites</option>
<option>shopping Sites</option>
<option>Search Engines</option>
</select>
<select name="secondcombo" size="1">
<option value="http://www.expedia.com">Expedia</option>
<option value="http://www.cheaptickets.com">Cheaptickets.com</option>
<option value="http://www.orbitz.com">Orbitz.com</option>
</select>
<input type="button" name="test" value="Get it!" onClick="getit()"> <script>
<!-- var len=document.comboform.firstcombo.options.length
var sites=new Array(len)
for(i=0;i<len;i++)
sites[i]=new Array() sites[0][0]=new Option("Expedia.com","http://www.expedia.com")
sites[0][1]=new Option("Cheaptickets.com","http://www.cheaptickets.com")
sites[0][2]=new Option("Orbitz.com","http://www.orbitz.com")
sites[1][0]=new Option("Macys","http://www.macys.com")
sites[1][1]=new Option("Target","http://www.target.com")
sites[1][2]=new Option("walmart","http://www.walmart.com")
sites[2][0]=new Option("Yahoo","http://www.yahoo.com")
sites[2][1]=new Option("Google","http://www.google.com")
sites[2][2]=new Option("Excite","http://www.excite.com")
sites[2][3]=new Option("Infoseek","http://www.infoseek.com")
var temp=document.comboform.secondcombo
function replace(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for(i=0;i<sites[x].length;i++){
temp.options[i]= new Option(sites[x][i].text,sites[x][i].value)
}
temp.options[0].selected=true
} function getit(){
location=temp.options[temp.selectedIndex].value
} //> </script>
</form> |
Page contents: itechies.net – Learn how to create double combo using javascript
|
