Categories:

Home / Free JavaScripts / Combo Boxes / Here

Cut & Paste Double Combo (Requires NS 3.x, 4.x, or IE 4.x)

Credit: JavaScript Kit

Description: An advanced combo script that uses two boxes, one as the main categories, the other as the links associated with each category.

Example:

Directions: Insert the below into the <body> section of your page:

Configuring the script: Here comes the painful part (just kidding). The first thing you'll need to do is change the contents of the first selection list to reflect the "main categories" you'll want to use. Below shows the code pertaining to that:

<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>

Change the text within each option, add in more <option> tags etc.

Next, you need to define (using HTML) the links associated with the first category. The code for this looks like this:

<select name="stage2" size="1">
<option value="http://javascriptkit.com">JavaScript Kit</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select>

Change those to reflect the links associated with your first category. Add in more <option> tags if necessary.

One last hurdle. Now, look at the code inside the <script> tag. In the above demo, we know that it contains three categories, the first one with three links, the second one with 2 links, and the third with 4 links (just look at the demo to confirm this). These links are contained as two dimensional array elements:

//group 1
group[0][0]=new Option("JavaScript Kit","http://javascriptkit.com")
group[0][1]=new Option("News.com","http://www.news.com")
group[0][2]=new Option("Wired News","http://www.wired.com")

//group 2
group[1][0]=new Option("CNN","http://www.cnn.com")
group[1][1]=new Option("ABC News","http://www.abcnews.com")

//group 3
group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")

The text in red represent the text of each selection, and its associated URL, respectively. Since we have three categories in our demo, we have three groups of link. Obviously, your combo will not necessarily follow this structure, so its important to know how to set up the variables accordingly. Lets use some examples as illustrations:

group[0][0]=new Option("CNN","http://cnn.com")
group[0][1]=new Option("News.com","http://www.news.com")

group[1][0]=new Option("CNN","http://www.cnn.com")
group[1][1]=new Option("ABC News","http://www.abcnews.com")
group[1][2]=new Option("Yahoo","http://www.yahoo.com")

I want...

Categories:
2
First category: 2 links
Second category: 3 links

 

group[0][0]=new Option("CNN","http://cnn.com")
group[0][1]=new Option("News.com","http://www.news.com")

group[1][0]=new Option("CNN","http://www.cnn.com")

group[2][0]=new Option("ABC News","http://www.abcnews.com")
group[2][1]=new Option("Yahoo","http://www.yahoo.com")
group[2][2]=new Option("Yahoo","http://www.yahoo.com")

group[3][0]=new Option("ABC News","http://www.abcnews.com")
group[3][1]=new Option("Yahoo","http://www.yahoo.com")
group[3][2]=new Option("Yahoo","http://www.yahoo.com")

I want...

Categories:
4
First category: 2 links
Second category: 1 link
Third category: 3 link
Fourth category: 3 link

It doesn't take a rocket scientist to figure out how to configure the variables to adopt to any number of categories, each with different number of links. As you can see, a typical variable above looks like this:

group[0][0]=new Option("JavaScript Kit","http://javascriptkit.com")

The blue 0 indicates which category the variable belong to (0=first, 1=second etc), and the red 0 indicates the variable's position within the category. Keep that in mind, and you should have no problem.

That's it! Once the variables are defined, the code automatically adopts to it, and creates a double combo according to your specifications.


JavaScript Tools:
Site Info

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.