double combo box with description ?

[sl0thy]

Hi was wondering if i could get some help with this java script ( http://www.simplythebest.net/info/javascript15.html ), id like it to show a text descripton once a item in the 2nd menu pull down is selected like this one ( http://www.dynamicdrive.com/dynamici...bodescribe.htm ) but i have no clue even where to start.. any help would be great
thanks

[JohnKrutsch]

Something like this ought to do it:

<form name="doublecombo">
<select name="example" size="1" onChange="redirect(this.options.selectedIndex); displaydesc()">
<option>SimplytheBest Shareware</option>
<option>SimplytheBest Affiliates</option>
<option>SimplytheBest Metasearch</option>
</select>
<select name="stage2" size="1" onchange="displaydesc()">
<option value="http://simplythebest.net/shareware.html">Index</option>
<option value="http://simplythebest.net/business.html">Business</option>
<option value="http://simplythebest.net/graphics.html">Graphics</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
<br />
<span id="descriptions" align="left" style="font:italic 13px Arial"></span>
</form>
<script>
<!--// Orignal Scripts:
////// Double Combo Script By Website Abstraction (www.wsabstract.com)
////// Drop down menu w/ description by Dynamic Drive (www.dynamicdrive.com)

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
var descr=new Array(groups)
for (i=0; i<groups; i++){
group[i]=new Array()
descr[i]=new Array()
}

group[0][0]= new Option("Index","http://simplythebest.net/shareware.html")
descr[0][0]= "Index description";
group[0][1]= new Option("Business","http://simplythebest.net/business.html")
descr[0][1]= "Business description";
group[0][2]= new Option("Graphics","http://simplythebest.net/graphics.html")
descr[0][2]= "Graphics description";

group[1][0]=new Option("Art and Photo","http://www.simplythebest.net/affiliates/affiliate_programs/art_photo.html")
descr[1][0]= "Art and Photo description";
group[1][1]=new Option("Books","http://www.simplythebest.net/affiliates/affiliate_programs/books.html")
descr[1][1]= "Books description";
group[1][2]=new Option("Clothing","http://www.simplythebest.net/affiliates/affiliate_programs/clothing.html")
descr[1][2]= "Clothing description";

group[2][0]=new Option("Web Search","http://www.simplythebest.net/search/search.html")
descr[2][0]= "Web Search description";
group[2][1]=new Option("Auctions Search","http://www.simplythebest.net/search/auctions.html")
descr[2][1]= "Auctions Search description";
group[2][2]=new Option("MP3 Search","http://www.simplythebest.net/search/mp3search.html")
descr[2][2]= "MP3 Search description";
group[2][3]=new Option("Job Search","http://www.simplythebest.net/search/jobs.html")
descr[2][3]= "Job Search description";

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}

function displaydesc(){
var desc=descr[document.doublecombo.example.selectedIndex][document.doublecombo.stage2.selectedIndex];
if (document.all) descriptions.innerHTML=desc;
else if (document.getElementById) document.getElementById("descriptions").innerHTML=desc
}

displaydesc()
//-->
</script>

[sl0thy]

thank you soooooooo much !!

[sl0thy]

jsut 2 more hopefully little things, i need to have it when you go to select the page it change in a frame/iframe.

and the description will prob be a little paragraph, so how to i go about making it do multi lines vs one long line ?

[c0lin]

Hi,

Thats exactly the script i need thanx, but i would like the description to appear in a form box

can someone modify the above script to make the description appear in a form box

i would be very greatfull

Thanx

-=C0lin=-

[JohnKrutsch]

Sure just add the text box to the form, let's say you named it txtdisplay, then you would just have to modify this function to look like so:

function displaydesc(){
var desc=descr[document.doublecombo.example.selectedIndex][document.doublecombo.stage2.selectedIndex];
document.doublecombo.txtdisplay .value=desc;
}

[c0lin]

Thanx for the reply john,

but i am a bit of a newbie to javascript.....what exactly do i replace....cud u just write out the whole script agen for me?

sorry for bein a newb!

and thanx for all the help

-=C0lin=-

[JohnKrutsch]

<form name="doublecombo">
<select name="example" size="1" onChange="redirect(this.options.selectedIndex); displaydesc()">
<option>SimplytheBest Shareware</option>
<option>SimplytheBest Affiliates</option>
<option>SimplytheBest Metasearch</option>
</select>
<select name="stage2" size="1" onchange="displaydesc()">
<option value="http://simplythebest.net/shareware.html">Index</option>
<option value="http://simplythebest.net/business.html">Business</option>
<option value="http://simplythebest.net/graphics.html">Graphics</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
<br />
<input type="text" name="txtdisplay">
</form>
<script>
<!--// Orignal Scripts:
////// Double Combo Script By Website Abstraction (www.wsabstract.com)
////// Drop down menu w/ description by Dynamic Drive (www.dynamicdrive.com)

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
var descr=new Array(groups)
for (i=0; i<groups; i++){
group[i]=new Array()
descr[i]=new Array()
}

group[0][0]= new Option("Index","http://simplythebest.net/shareware.html")
descr[0][0]= "Index description";
group[0][1]= new Option("Business","http://simplythebest.net/business.html")
descr[0][1]= "Business description";
group[0][2]= new Option("Graphics","http://simplythebest.net/graphics.html")
descr[0][2]= "Graphics description";

group[1][0]=new Option("Art and Photo","http://www.simplythebest.net/affiliates/affiliate_programs/art_photo.html")
descr[1][0]= "Art and Photo description";
group[1][1]=new Option("Books","http://www.simplythebest.net/affiliates/affiliate_programs/books.html")
descr[1][1]= "Books description";
group[1][2]=new Option("Clothing","http://www.simplythebest.net/affiliates/affiliate_programs/clothing.html")
descr[1][2]= "Clothing description";

group[2][0]=new Option("Web Search","http://www.simplythebest.net/search/search.html")
descr[2][0]= "Web Search description";
group[2][1]=new Option("Auctions Search","http://www.simplythebest.net/search/auctions.html")
descr[2][1]= "Auctions Search description";
group[2][2]=new Option("MP3 Search","http://www.simplythebest.net/search/mp3search.html")
descr[2][2]= "MP3 Search description";
group[2][3]=new Option("Job Search","http://www.simplythebest.net/search/jobs.html")
descr[2][3]= "Job Search description";

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}

function displaydesc(){
var desc=descr[document.doublecombo.example.selectedIndex][document.doublecombo.stage2.selectedIndex];
document.doublecombo.txtdisplay.value=desc;
}

displaydesc()
//-->
</script>

[c0lin]

thanx for that john, much appreciated

-=c0lin=-

[MaxPower]

Here is an alternate Javascript Array I found, but I am can't figure out how to have the url's open up into a new window.

<SCRIPT LANGUAGE="JavaScript">
<!--
v=false;
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined") v=true;
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

<!-- Original: webreference.com -->
<!-- Web Site: http://webreference.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
if(v){a=new Array();aln=0;}
function getFormNum (formName) {
formNum =-1;
for (i=0;i<document.forms.length;i++){
tempForm = document.forms[i];
if (formName == tempForm) {
formNum = i;
correctForm = tempForm;
break;
}
}
return formNum;
}
function jmp(formName,elementNum) {
getFormNum(formName);
if (formNum>=0) {
with (document.forms[formNum].elements[elementNum]) {
i=selectedIndex;
if (i>=0) location=options[i].value;
}
}
}
function O(txt,url) {
a[k]=new Option(txt,url);k++;
}
function relate(formName,elementNum,j) {
if(v) {
k=1;
if(j==0) { // default category item
a=new Array();
O("Pick Item --->","");
}

if(j==1) { // 1st category items
a=new Array();
O("Pick Item --->","");
O("Buttons","http://javascript.internet.com/buttons/");
O("Clocks","http://javascript.internet.com/clocks/");
O("Cookies","http://javascript.internet.com/cookies/");
O("Forms","http://javascript.internet.com/forms/");
O("Games","http://javascript.internet.com/games/");
O("Messages","http://javascript.internet.com/messages/");
O("Miscellaneous","http://javascript.internet.com/miscellaneous/");
O("Navigation","http://javascript.internet.com/navigation/");
O("Page Details","http://javascript.internet.com/page-details/");
O("Pass. Protec.","http://javascript.internet.com/passwords/");
O("Scrolls","http://javascript.internet.com/scrolls/");
O("User Details","http://javascript.internet.com/user-details/");
O("Table Of Contents","http://javascript.internet.com/toc.html");
}

if(j==2) { // 2nd category items
a=new Array();
O("Pick Item --->","");
O("How Do I...?","http://forums.internet.com/cgi-bin/[email protected]^[email protected]");
O("Script Help","http://forums.internet.com/cgi-bin/[email protected]^[email protected]");
O("Script Requests","http://forums.internet.com/cgi-bin/[email protected]^[email protected]");
O("Intro to JavaScript","http://forums.internet.com/cgi-bin/[email protected]^[email protected]");
O("What's New?","http://forums.internet.com/cgi-bin/[email protected]^[email protected]");
}

if(j==3) { // 3rd category items
a=new Array();
O("Pick Item --->","");
O("JS Question?","http://forums.internet.com/cgi-bin/[email protected]^[email protected]");
O("JS Contribution","http://javascript.internet.com/contribute.html");
O("Site Comments","http://javascript.internet.com/contact-us.html");
O("Other ...","http://javascript.internet.com/feedback.html");
}

aln2=a.length;
getFormNum(formName);
if (formNum>=0) {
formNum = formNum + 1;
with (document.forms[formNum].elements[elementNum]) {
for (var i=options.length-1;i>0;i--) options[i]=null;
for (var i=1;i<aln2;i++) options[i-1]=a[i];
options[0].selected=true;
}
}
} else {
jmp(formName,elementNum);
}
}
// End -->
</SCRIPT>
</head>

<!-- STEP TWO: Put this code into the BODY of your HTML document -->

<BODY>

<center>
<table border=0>
<tr valign=top>
<TD align=center><form name=f1 method=post action="" onSubmit="return false;">
<select name=m1 onChange="relate(this.form,0,this.selectedIndex); document.f2.m2.focus();">
<option value="/">Pick Category --->
<option value="/">JavaScripts
<option value="/">Message Forum
<option value="/">Feedback Form
</select></form></td>

<td align=center> <b>then</b> </td>

<td><form name=f2 method=post action="" onsubmit="return false;">
<select name="m2" onchange="jmp(this.form,0)">
<option value="/">Pick Item --->

<!--

Put a blank item (like below) for the MAXIMUM
number of items in one of your categories.
i.e. If your "largest" menu contains 5 items,
include 5 blank lines here. For 10, include
10, and so on.

-->

<option value="/">
<option value="/">
<option value="/">
<option value="/">
<option value="/">
<option value="/">
<option value="/">
<option value="/">
<option value="/">
<option value="/">
<option value="/">
<option value="/">
<option value="/">

</select></form></td>

</tr>
</table>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>