...

View Full Version : Double Combo - More than one on the same page



ben_uk
08-31-2006, 07:15 PM
Hi There,

Hoping you can help!

I intend to use this script to create some "combo" options on a web page I'm working on.

http://www.javascriptkit.com/script/cut183.shtml

However, I can't for the life of me work out how to edit the script on the link below to enable to have more than one instance of the two box script. I.e. I want to use the two box combo several times for different categories.

I've tried renaming the form and select names, and then changing the corresponding values in the javascript, but to no avail.

Can anyone shed any light?

Thanks

Ben

ben_uk
09-04-2006, 10:44 AM
Any ideas?

Here's the code:



<form name="***_ics">
<p>
<select name="***_ics" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Category</option>
<option>Ballast Control</option>
<option>Charge Pumps</option>
<option>Converters</option>
</select>
<br>
<select name="icstage" size="1">
<option>Manufacturer</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>
<script>

/* Associated IC Products Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here! */


var groups=document.***_ics.***_ics.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[1][0]=new Option("International Rectifier","/ir.jsp")

group[2][0]=new Option("Linear Technology","/linear.jsp")
group[2][1]=new Option("Texas Instruments","/ti.jsp")

group[3][0]=new Option("Linear Technology","/linear.jsp")
group[3][1]=new Option("Texas Instruments","/ti.jsp")
group[3][2]=new Option("Zetex Semiconductors","/zetex.jsp")

group[4][0]=new Option("Analog Devices","/adi.jsp")

var temp=document.***_ics.icstage

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>


The above works fine, it's when I want to use it again on the same page when problems occur. Have tried changing all the variables, form and select names, but I can't get them to work independantly.

Hoping someone can help...

Thanks
Ben

ben_uk
09-04-2006, 10:48 AM
LOL. The form name and select name was an abbreviation of "associated ICs", which the swear filter doesn't seemed to have liked. I.e. a s s. I haven't used three asterisks in my naming conventions!

Here's the code again without ***s.



<form name="asc_ics">
<p>
<select name="asc_ics" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Category</option>
<option>Ballast Control</option>
<option>Charge Pumps</option>
<option>Converters</option>
</select>
<br>
<select name="icstage" size="1">
<option>Manufacturer</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>
<script>

/* Associated IC Products Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here! */


var groups=document.asc_ics.asc_ics.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[1][0]=new Option("International Rectifier","/ir.jsp")

group[2][0]=new Option("Linear Technology","/linear.jsp")
group[2][1]=new Option("Texas Instruments","/ti.jsp")

group[3][0]=new Option("Linear Technology","/linear.jsp")
group[3][1]=new Option("Texas Instruments","/ti.jsp")
group[3][2]=new Option("Zetex Semiconductors","/zetex.jsp")

group[4][0]=new Option("Analog Devices","/adi.jsp")

var temp=document.asc_ics.icstage

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>

vwphillips
09-04-2006, 11:06 AM
see

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f14

vwphillips
09-04-2006, 11:38 AM
or


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script>

/* Associated IC Products Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here! */

// Modified by VicPhillips (04-September-2006) - http://www.vicsjavascripts.org.uk

var group=[];
group[1]=[]
group[1][0]=new Option("International Rectifier","/ir.jsp")

group[2]=[]
group[2][0]=new Option("Linear Technology","/linear.jsp")
group[2][1]=new Option("Texas Instruments","/ti.jsp")

group[3]=[]
group[3][0]=new Option("Linear Technology","/linear.jsp")
group[3][1]=new Option("Texas Instruments","/ti.jsp")
group[3][2]=new Option("Zetex Semiconductors","/zetex.jsp")

var group1=[];
group1[3]=[]
group1[3][0]=new Option("New International Rectifier","/ir.jsp")

group1[2]=[]
group1[2][0]=new Option("New Linear Technology","/linear.jsp")
group1[2][1]=new Option("New Texas Instruments","/ti.jsp")

group1[1]=[]
group1[1][0]=new Option("New Linear Technology","/linear.jsp")
group1[1][1]=new Option("New Texas Instruments","/ti.jsp")
group1[1][2]=new Option("New Zetex Semiconductors","/zetex.jsp")



function redirect(obj,nme,ary){
var x=obj.selectedIndex;
var temp=obj.form[nme];
temp.options.length=0;
for (i=0;i<ary[x].length;i++){
temp.options[i]=new Option(ary[x][i].text,ary[x][i].value)
}
temp.options[0].selected=true
}

function go(obj,nme){
location=obj.form[nme].value
}

//-->
</script>
</head>

<body>
<form name="asc_ics">
<p>
<select name="asc_ics" size="1" onChange="redirect(this,'icstage',group)">
<option>Category</option>
<option>Ballast Control</option>
<option>Charge Pumps</option>
<option>Converters</option>
</select>
<br>
<select name="icstage" size="1">
<option>Manufacturer</option>
</select>
<input type="button" name="test" value="Go!" onClick="go(this,'icstage')">
</p>
<p>
<select name="asc_ics1" size="1" onChange="redirect(this,'icstage1',group1)">
<option>Category</option>
<option>Ballast Control</option>
<option>Charge Pumps</option>
<option>Converters</option>
</select>
<br>
<select name="icstage1" size="1">
<option>Manufacturer</option>
</select>
<input type="button" name="test" value="Go!" onClick="go(this,'icstage1')">
</p>
</body>

</html>

ben_uk
09-04-2006, 01:44 PM
Many many thanks Vic!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum