Drop down menu w/ description Help needed

[_KaaL_]

Hello!
Sasha here
your site got Drop down menu w/ description this script
http://www.dynamicdrive.com/dynamici...bodescribe.htm

i wanted to know how to make the links feeded in it to open in our own separate frame (for eg. "mainframe" )
i tried many things but didnt succedd
anybody can help plz

[Twey]

You can, apparently, supply a target attribute to the <option>s. Study the example.

[benslayton]

Here Is The Original Code:

<!--Example drop down menu 1-->

<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://www.javascriptkit.com">JavaScript Kit </option>
<option value="http://freewarejava.com">Freewarejava.com</option>
<option value="http://wired.com" target="newwin">Wired News</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.codingforums.com" target="newwin">Coding Forums</option>
</select>
 <input type="button" value="Go" 
onClick="jumptolink(document.form1.select1)"><br>
<span id="textcontainer1" align="left" style="font:italic 13px Arial">
</span>
</form>

<!--Example drop down menu 2-->

<form name="form2">
<select name="select2" size="1" style="background-color:#E3FFDF" onChange="displaydesc(document.form2.select2, thetext2, 'textcontainer2')">
<option selected value="http://www.cnn.com">CNN</option>
<option value="http://www.msnbc.com">MSNBC</option>
<option value="http://news.bbc.co.uk">BBC News</option>
<option value="http://www.theregister.com/">The Register</option>
</select>
 <input type="button" value="Go" 
onClick="jumptolink(document.form2.select2)"><br>
<span id="textcontainer2" align="left" style="font:italic 13px Arial">
</span>
</form>



<!--IMPORTANT: Below script should always follow all of your HTML codes above, and never proceed them-->
<!--To be safe, just add below script at the end of your page-->

<script type="text/javascript">

/***********************************************
* Drop down menu w/ description- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
var thetext1=new Array()
thetext1[0]="Comprehensive JavaScript tutorials and over 400+ free scripts"
thetext1[1]="Direct link to hundreds of free Java applets online!"
thetext1[2]="Up to date news on the technology front"
thetext1[3]="News.com- The #1 technology News site."
thetext1[4]="Web Coding and development forums"

/// You may define additional text arrays if you have multiple drop downs:
var thetext2=new Array()
thetext2[0]="CNN- US and World News."
thetext2[1]="MSNBC- NBC News online."
thetext2[2]="BBC News- Updated every minute of every day."
thetext2[3]="TheRegister- Daily IT news."

// Now, see 2) below for final customization step

function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}

function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}

//2) Call function displaydesc() for each drop down menu you have on the page
//   This function displays the initial description for the selected menu item
//   displaydesc(name of select menu, name of corresponding text array, ID of SPAN container tag):
//   Important: Remove the calls not in use (ie: 2nd line below if there's only 1 menu on your page)

displaydesc(document.form1.select1, thetext1, 'textcontainer1')
displaydesc(document.form2.select2, thetext2, 'textcontainer2')

</script>

Here Is what you Have To Change:

<!--Example drop down menu 1-->

<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://www.javascriptkit.com">JavaScript Kit </option>
<option value="http://freewarejava.com">Freewarejava.com</option>
<option value="http://wired.com" target="newwin">Wired News</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.codingforums.com" target="newwin">Coding Forums</option>
</select>
 <input type="button" value="Go" 
onClick="gotofirstlink(document.form1.select1)"><br>
<span id="textcontainer1" align="left" style="font:italic 13px Arial">
</span>
</form>

<!--Example drop down menu 2-->

<form name="form2">
<select name="select2" size="1" style="background-color:#E3FFDF" onChange="displaydesc(document.form2.select2, thetext2, 'textcontainer2')">
<option selected value="http://www.cnn.com">CNN</option>
<option value="http://www.msnbc.com">MSNBC</option>
<option value="http://news.bbc.co.uk">BBC News</option>
<option value="http://www.theregister.com/">The Register</option>
</select>
 <input type="button" value="Go" 
onClick="gotofirstlink(document.form2.select2)"><br>
<span id="textcontainer2" align="left" style="font:italic 13px Arial">
</span>
</form>



<!--IMPORTANT: Below script should always follow all of your HTML codes above, and never proceed them-->
<!--To be safe, just add below script at the end of your page-->

<script type="text/javascript">

/***********************************************
* Drop down menu w/ description- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
var thetext1=new Array()
thetext1[0]="Comprehensive JavaScript tutorials and over 400+ free scripts"
thetext1[1]="Direct link to hundreds of free Java applets online!"
thetext1[2]="Up to date news on the technology front"
thetext1[3]="News.com- The #1 technology News site."
thetext1[4]="Web Coding and development forums"

/// You may define additional text arrays if you have multiple drop downs:
var thetext2=new Array()
thetext2[0]="CNN- US and World News."
thetext2[1]="MSNBC- NBC News online."
thetext2[2]="BBC News- Updated every minute of every day."
thetext2[3]="TheRegister- Daily IT news."

// Now, see 2) below for final customization step

function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}

function gotofirstlink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}

//2) Call function displaydesc() for each drop down menu you have on the page
//   This function displays the initial description for the selected menu item
//   displaydesc(name of select menu, name of corresponding text array, ID of SPAN container tag):
//   Important: Remove the calls not in use (ie: 2nd line below if there's only 1 menu on your page)

displaydesc(document.form1.select1, thetext1, 'textcontainer1')
displaydesc(document.form2.select2, thetext2, 'textcontainer2')

</script>

so you have to change "jumptolink" to "go to first link" you have to do that three times.

And That should do the job.

[Twey]

My dear chap, what are you on about? The only change you've made to that code is to modify the name of the function.
Much more useful would be:

function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById){
  if(selectedopt.getAttribute("target")=="newwin")
    window.open(selectedopt.value)
  else if(document.frames[selectedopt.getAttribute("target")]) {
    document.frames[selectedopt.getAttribute("target")].location = selectedopt.value;
  else
    window.location=selectedopt.value
}
}

This should allow you to specify a frame name as a target attribute to the <option> elements.

[_KaaL_]

thank you for ur responses
i added the code as told by twey
but still dont work
correct me if i did anything wrong
below is one example about what i did and need corrections on the same

i replaced the code

function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}

with this one

function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById){
  if(selectedopt.getAttribute("target")=="newwin")
    window.open(selectedopt.value)
  else if(document.frames[selectedopt.getAttribute("target")]) {
    document.frames[selectedopt.getAttribute("target")].location = selectedopt.value;
  else
    window.location=selectedopt.value
}
}

and then
did this at its place because the frame name where i want tht to open is middle

<option value="http://freewarejava.com" target="middle">JAVA</option>

and viewed didnt work ..
i want to know now is there something wrong i did in replacing the code or do i hav to do some change after replace in the code
plz help ty

[Twey]

Sorry, I missed a brace.

function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById){
  if(selectedopt.getAttribute("target")=="newwin")
    window.open(selectedopt.value)
  else if(document.frames[selectedopt.getAttribute("target")]) {
    document.frames[selectedopt.getAttribute("target")].location = selectedopt.value;
  } else
    window.location=selectedopt.value
}
}

If it still doesn't work, please give a URI to your page.

[_KaaL_]

Still doesnt work

http://users.igl.net/ippl/dropdowns.htm

this is URL check page source... i kept what it was before
just hav put a frame below named main
Want those drop down link i hav put some .. not all
just want them to open in tht "main" frame

[benslayton]

My bad I was in a hurry. Had to Go to a competion. When I tried it out i randomly selected "Wired News", and that one does come up in a new window. Sorry.

[benslayton]

Now that you posted the link, have you checked this out?

http://www.dynamicdrive.com/dynamici...opdownview.htm

[_KaaL_]

thanx for that post ben i'll hav tht as the last option if drop down with description doesnt work out with any options