PDA

View Full Version : mixing 1 2 level combobox javascript



jackam
02-24-2015, 09:49 AM
Hi
I am using 2-level combo box, JavaScript Kit
, and it is working just fine.
I now need to change this script to act as a 1 level drop box on some of my listed item since they have no sub category.
Would be grateful for someone to suggest a change to the script so when a user selects and item it goes straight to a website rather than showing a 2nd category.
Thanks in advance.

jackam
02-24-2015, 11:02 AM
Hi
I am using 2-level combo box, JavaScript Kit
, and it is working just fine.
I now need to change this script to act as a 1 level drop box on some of my listed item since they have no sub category.
Would be grateful for someone to suggest a change to the script so when a user selects and item it goes straight to a website rather than showing a 2nd category.
Thanks in advance.

Script is from http://www.javascriptkit.com/script/script2/2levelcombo.shtml.
<form name="dynamiccombo">
<select name="stage2" size="1" onChange="displaysub()">
<option value="#">This is a place Holder text </option>
<option value="#">This is a Place Holder text </option>
<option value="#">This is a Place Holder text </option>
<option value="#">This is a Place Holder text </option>
</select>
<input type="button" name="test" value="Go!"
onClick="gothere()">
</form>

<script>
<!--

//2-level combo box script- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use

//STEP 1 of 2: DEFINE the main category links below
//EXTEND array as needed following the laid out structure
//BE sure to preserve the first line, as it's used to display main title

var category=new Array()
category[0]=new Option("SELECT A CATEGORY ", "") //THIS LINE RESERVED TO CONTAIN COMBO TITLE
category[1]=new Option("Webmaster sites", "combo1")
category[2]=new Option("News sites", "combo2")
category[3]=new Option("Entertainment", "combo3")

//STEP 2 of 2: DEFINE the sub category links below
//EXTEND array as needed following the laid out structure
//BE sure to preserve the LAST line, as it's used to display submain title

var combo1=new Array()
combo1[0]=new Option("JavaScript Kit","http://javascriptkit.com")
combo1[1]=new Option("Dynamic Drive","http://www.dynamicdrive.com")
combo1[2]=new Option("Freewarejava.com","http://www.freewarejava.com")
combo1[3]=new Option("Free Web Templates","http://www.freewebtemplates.com")
combo1[4]=new Option("Web Monkey","http://www.webmonkey.com")
combo1[5]=new Option("BACK TO CATEGORIES","") //THIS LINE RESERVED TO CONTAIN COMBO SUBTITLE

var combo2=new Array()
combo2[0]=new Option("CNN","http://www.cnn.com")
combo2[1]=new Option("MSNBC","http://www.msnbc.com")
combo2[2]=new Option("BBC News","http://news.bbc.co.uk")
combo2[3]=new Option("ABC News","http://www.abcnews.com")
combo2[4]=new Option("BACK TO CATEGORIES","") //THIS LINE RESERVED TO CONTAIN COMBO SUBTITLE

var combo3=new Array()
combo3[0]=new Option("Hollywood.com","http://www.hollywood.com")
combo3[1]=new Option("MTV","http://www.mtv.com")
combo3[2]=new Option("ETOnline","http://etonline.com")
combo3[3]=new Option("BACK TO CATEGORIES","") //THIS LINE RESERVED TO CONTAIN COMBO SUBTITLE

var curlevel=1
var cacheobj=document.dynamiccombo.stage2

function populate(x){
for (m=cacheobj.options.length-1;m>0;m--)
cacheobj.options[m]=null
selectedarray=eval(x)
for (i=0;i<selectedarray.length;i++)
cacheobj.options[i]=new Option(selectedarray[i].text,selectedarray[i].value)
cacheobj.options[0].selected=true

}

function displaysub(){
if (curlevel==1){
populate(cacheobj.options[cacheobj.selectedIndex].value)
curlevel=2
}
else
gothere()
}


function gothere(){
if (curlevel==2){
if (cacheobj.selectedIndex==cacheobj.options.length-1){
curlevel=1
populate(category)
}
else
location=cacheobj.options[cacheobj.selectedIndex].value
}
}

//SHOW categories by default
populate(category)

//-->
</script>

<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>

vwphillips
02-24-2015, 11:28 AM
<!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>
</head>

<body>
<form name="dynamiccombo">
<select id="stage2" name="stage2" size="1" onchange="displaysub('stage2')">
</select>
<input type="button" name="test" value="Go!"
onclick="displaysub('stage2')">
</form>

<script type="text/javascript">
<!--

//2-level combo box script- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use

//STEP 1 of 2: DEFINE the main category links below
//EXTEND array as needed following the laid out structure
//BE sure to preserve the first line, as it's used to display main title

var category=[];
category[0]=new Option("SELECT A CATEGORY ", ""); //THIS LINE RESERVED TO CONTAIN COMBO TITLE
category[1]=new Option("Webmaster sites", "combo1");
category[2]=new Option("CNN","http://www.cnn.com");
category[3]=new Option("Entertainment", "combo3");

//STEP 2 of 2: DEFINE the sub category links below
//EXTEND array as needed following the laid out structure
//BE sure to preserve the LAST line, as it's used to display submain title

var combo1=[];
combo1[0]=new Option("Select");
combo1[1]=new Option("JavaScript Kit","http://javascriptkit.com");
combo1[2]=new Option("Dynamic Drive","http://www.dynamicdrive.com");
combo1[3]=new Option("Freewarejava.com","http://www.freewarejava.com");
combo1[4]=new Option("Free Web Templates","http://www.freewebtemplates.com");
combo1[5]=new Option("Web Monkey","http://www.webmonkey.com");
combo1[6]=new Option("BACK TO CATEGORIES","category"); //THIS LINE RESERVED TO CONTAIN COMBO SUBTITLE


var combo3=[];
combo3[0]=new Option("Select");
combo3[1]=new Option("MTV","http://www.mtv.com");
combo3[2]=new Option("ETOnline","http://etonline.com");
combo3[3]=new Option("BACK TO CATEGORIES","category"); //THIS LINE RESERVED TO CONTAIN COMBO SUBTITLE


function populate(id,selectedarray){
var cacheobj=document.getElementById(id);
if (cacheobj&&selectedarray instanceof Array){
cacheobj.options.length=0;
for (var i=0;i<selectedarray.length;i++){
cacheobj.options[i]=new Option(selectedarray[i].text,selectedarray[i].value)
}
cacheobj.options[0].selected=true
}
}

function displaysub(id){
var cacheobj=document.getElementById(id);
if (cacheobj&&cacheobj.options[0]){
var selectedarray=window[cacheobj.value];
if (selectedarray instanceof Array){
populate(id,selectedarray);
}
else if (cacheobj.value){
window.top.location=cacheobj.value;
}
}
}



//SHOW categories by default
populate('stage2',category);

//-->
</script>

<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>
</body>

</html>

jackam
02-24-2015, 12:08 PM
What a fantastic piece of coding. It worked 1st time and such a quick reply.
So grateful to you.
If I may ask you 1 more favour please.
How do I style 1 line of text in a category to stand out? i.e. change color of text, italic etc?

vwphillips
02-25-2015, 09:25 AM
I do not know any X-Browser method of applying style to a select option

I sugest you post this question in the CSS forum