Scripts | JS tutorials | Applets | Web Tutorials | Forum | Freewarejava

spacer.gif (810 bytes)


Please support our sponsor

Home / Free JavaScripts / Combo Boxes / Here

Website Abstraction

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

Credit: Website Abstraction

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 in read, 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://wsabstract.com">Website Abstraction</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("Website Abstraction","http://wsabstract.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("Website Abstraction","http://wsabstract.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.

Remember, this script only works with NS 3.x and up, and IE 4.x and up. If you have an large audience of IE 3.x users, this script is not recommended for use on that page.

If you require assistance installing the script, just visit the WA help forum.

Subscribe to our new newsletter, FREE!
Get weekly updates on Website Abstraction AND Freewarejava.com, for FREE! Subscribe to this popular web developer newsletter, and stay informed on the latest development in both JavaScript and Java.

Dynamic Drive DHTML code library
spacer.gif (810 bytes)

CopyRight © 1997-1999 Website Abstraction. All rights reserved

Click here for free Java applets!
spacer.gif (810 bytes)