will this work with an internal link

**ajfmrf** · 05-17-2012, 09:08 PM

Instead of external links.

Code:

<form name="dynamiccombo">
<select name="stage2" size="1">
<option value="#">This is a Place Holder</option>
<option value="#">This is a Place Holder</option>
<option value="#">This is a Place Holder</option>
</select>
<input type="button" name="test" value="Go!"
onClick="gothere()">
</form>

<script>
<!--

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

  
//DEFINE the group of links for display in the combo
//EXTEND each array and its elements as needed
//BE sure to follow the pattern revealed below
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")

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")

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")


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 gothere(){
location=cacheobj.options[cacheobj.selectedIndex].value
}

//SHOW first combo by default
populate(combo1)

//-->
</script>

<!--SET up your links, and pass in the name of the group (ie: combo1) you wish to display for the link in question-->
<a href="javascript:populate(combo1)">Webmaster sites</a> | <a href="javascript:populate(combo2)">News sites</a> | <a href="javascript:populate(combo3)">Entertainment</a>

I can't find much out from javascriptkit.com as far as help

I want to expand the catagories and use this on a rather big page.

I thought I had this working some time ago but now,visiting it again it is not working.

**ajfmrf** · 05-18-2012, 02:36 AM

hmm, what for???

**coothead** · 05-18-2012, 09:08 AM

Hi there ajfmrf,

the problem with using javascript for links is that they do not work for those with javascript disabled.

Here is a HTML/CSS alternative, that may interest you...

Code:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>simple select</title>

<style>
body {
    background-color:#f0f0f0;
    font-family:verdana,sans-serif;
 }
#box {
    position:relative;
    width:140px;
    height:30px;
    margin:auto;
 }
ul {
    position:absolute;
    margin:0;
    padding:0;
    width:100%;
    height:30px;
    border:1px solid #999;
    list-style-type:none;
    overflow:hidden;
    background-color:#fff;
    box-shadow:4px 4px 8px #666;
 }
ul:hover {
    overflow:visible;
    height:auto;
 }
ul li {
    line-height:20px;
 }
#sel {
    line-height:30px;
    text-align:center;
    font-weight:bold;
 }    
ul a {
    display:block;
    height:20px;
    padding-left:5px;
    font-size:12px;
    color:#000;
 }
ul a:hover {
    background-color:#ccc;
 } 
</style>

</head>
<body>

<div id="box">
<ul>
 <li id="sel">selection</li>
 <li><a href="#">link one</a></li>
 <li><a href="#">link two</a></li>
 <li><a href="#">link three</a></li>
 <li><a href="#">link four</a></li>
 <li><a href="#">link five</a></li>
 <li><a href="#">link six</a></li>
 <li><a href="#">link seven</a></li>
 <li><a href="#">link eight</a></li>
 <li><a href="#">link nine</a></li>
 <li><a href="#">link ten</a></li>
 <li><a href="#">link eleven</a></li>
 <li><a href="#">link twelve</a></li>
 <li><a href="#">link thirteen</a></li>
 <li><a href="#">link fourteen</a></li>
 <li><a href="#">link fifteen</a></li>
 <li><a href="#">link sixteen</a></li>
 <li><a href="#">link seventeen</a></li>
 <li><a href="#">link eighteen</a></li>
</ul>
</div>

</body>
</html>

coothead

**ajfmrf** · 05-18-2012, 11:49 AM

Nice job Coothead.

I liked the way the other script was able to remove a lot of the dropdowns code to a js external page.

Doing it your way will add a lot to an already very large page but will work rather easily.

**coothead** · 05-18-2012, 11:51 AM

No problem, you're very welcome.

coothead

Thread: will this work with an internal link

Thread Tools

Search Thread

will this work with an internal link

The Following 2 Users Say Thank You to coothead For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions