Log in

View Full Version : will this work with an internal link


ajfmrf
05-17-2012, 09:08 PM
Instead of external links.



<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. :eek:

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

<!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