Select from dropdown element in iframe

hi, i am trying to create a simple version of itunes...and i am using iframes to do this. I have already set up the iframes using dreamweaver and used a drop-down menu to select the genre. When selecting the genre the artists appears in iframe1...and i want to be able to select the artist so that the songs appear. I am unsure of how to do this, could anybody help?
Thanks

Here is my current code...

Expand|Select|Wrap|Line Numbers

 <html>

<head>

<title>MiTunes</title>

<style>

.k4 {

    font-family: "Courier New", Courier, monospace;

    font-size: large;

    font-style: normal;

    font-weight: bold;

    text-transform: uppercase;

    color: #666666;

    background-color: #CCCCCC;

    letter-spacing: normal;

    text-align: center;

    word-spacing: normal;

    border: thin inset #666666;

    position: fixed;

}

.style1 {

    color: #0099FF;

    font-size: 24px;

    font-weight: bold;

}

.style2 {

    color: #000099;

    font-size: 24px;

    font-weight: bold;

}

.style3 {

    color: #0033FF;

    font-size: 24px;

    font-weight: bold;

}

.style4 {color: #000099; font-size: x-large; }

.style5 {color: #003366; font-size: x-large; font-weight:bold }

</style>

<script type='text/javascript'>

    RnB=["Justin Timberlake","Timbaland","Jaz Z","G Unit"];

    Rap=["Eminem","50 Cent","The Game"];

  var s="";

  function show(choice){

    if(choice==1)music=RnB;

    if(choice==2)music=Rap;

    s="<form><select size='"+music.length+"'>";

    for(c=0;c<music.length;c++)

      s+="<option>"+music[c]+"</option>";

    s+="</select></form>";    

    with(document.getElementById('examples').contentDocument){

      open();

      write(s);

      close();

    }

  }

</script>

<script type='text/javascript'>

    RnB=["Justin Timberlake","Timbaland","Jaz Z","G Unit"];

    Rap=["Eminem","50 Cent","The Game"];
 
  var s="";

  function show(choice){

    if(choice==1)music=RnB;

    if(choice==2)music=Rap;

    s="<form><select size='"+music.length+"'>";

    for(c=0;c<music.length;c++)

      s+="<option>"+music[c]+"</option>";

    s+="</select></form>";    

    with(document.getElementById('examples2').contentDocument){

      open();

      write(s);

      close();

    }

  }

</script>

<script type='text/javascript'>

    Justin Timberlake=["Lovestoned","Gay Boy"];

    Eminem=["Mockingbird","Wrapper"];
 
    var t="";

    function show(artist){

        if(artist==1)song="Justin Timberlake";

        if(artist==2)song="Eminem";

    for(c=0;c<song.length;c++)

        with(document.getElementById('examples3'.contentDocument){

        open()

        write(t)

        close()

        }

</script>

</head>

<body>

  <p>Select Genre</p>

  <form>

    <select name="select" onChange="show(this.selectedIndex);">

      <option>Select</option>

      <option>RnB</option>

      <option>Rap</option>

    </select>

  </form>

<p>

    <iframe width="300" height="300" id='examples2'></iframe>

    <iframe width="300" height="300" id='examples3'></iframe>

    <iframe width="300" height="300" id='examples4'></iframe>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title></title>

<script type='text/javascript'>

function addIt(cKey)

{

d = document.forms["foo"].elements["bar"];

d.value =  (cKey.value=='backspace') ? d.value.slice(0,-1) : d.value+cKey.value;

}

</script>

<body>

<div><form name="foo" action=''>

<fieldset><legend class="style4">Keyboard</legend>
 
<table width="950" height="176" border="1" align="center" cellpadding="2" cellspacing="2">

  <tr>

    <td width="39" height="54" align="center" valign="middle" bgcolor="#000099"><INPUT name="PressQ" type=button class=style1 id="PressQ"  onClick="addIt(this)" value=Q width="120" hspace=""></td>

    <td width="39" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=W></td>

    <td width="39" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=E></td>

    <td width="39" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=R></td>

    <td width="39" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=T></td>

    <td width="39" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=Y></td>

    <td width="39" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=U></td>

    <td width="43" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=I></td>

    <td width="43" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=O></td>

    <td width="43" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=P></td>

    <td colspan="2" align="center" bgcolor="#000099">

      <input name="bar" type="text" class="style5" onFocus="document.forms[&quot;foo&quot;].elements[&quot;focusedField&quot;].value = this.name" value="" size="25" /></td></tr>

  <tr>

    <td height="54" align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=A></td>

    <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=S></td>

    <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=D></td>

    <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=F></td>

    <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=G></td>

    <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=H></td>

    <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=J></td>

    <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=K></td>

    <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=L></td>

    <td bgcolor="#0033CC" span class="style1"> </span></td>

    <td width="192" bgcolor="#0033CC">&nbsp;</td>

    <td width="224" bgcolor="#0033CC">&nbsp;</td>

  </tr>

  <tr>

    <td height="58" align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=Z></td>

    <td align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=X></td>

    <td align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=C></td>

    <td align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=V></td>

    <td align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=B></td>

    <td align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=N></td>

    <td align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=M></td>

      <td colspan="3" align="center" valign="middle" bgcolor="#0099FF"><input name="button" type='button' class="style3" style='width:120px height:10px' onClick="addIt(this)" value=backspace></td>

      <td bgcolor="#0099FF">

    <td bgcolor="#0099FF">

  </tr>

</table>

</body>

    </iframe>

  </p>

  <script type='text/javascript'>

    Justin Timberlake=["Justin Timberlake","Timbaland","Jaz Z","G Unit"];

    Timbaland=["Eminem","50 Cent","The Game"];  

    var t="";

  function show(song){

    if(choice==1)song=Justin Timberlake;

    if(choice==2)song=Timbaland;

    t="<form><select size='"+music.length+"'>";

    for(c=0;c<music.length;c++)

      t+="<option>"+music[c]+"</option>";

    t+="</select></form>";    

    with(document.getElementById('examples2').contentDocument){

      open();

      write(s);

      close();

      </script>

<script type='text/javascript'>;

    Justin Timberlake=["Justin Timberlake","Timbaland","Jaz Z","G Unit"];

    Timbaland=["Eminem","50 Cent","The Game"];
 
  var t="";

  function show(song){

    if(choice==1)song=Justin Timberlake;

    if(choice==2)song=Timbaland;

    t="<form><select size='"+song.length+"'>";

    for(c=0;c<song.length;c++)

      t+="<option>"+song[t]+"</option>";

    t+="</select></form>";    

    with(document.getElementById('examples3').contentDocument){

      open();

      write(t);

      close();

    }

  }

  </script>

</body>

</html>

Dec 11 '07 #1

Subscribe Post Reply

2866

acoder

16,027

Expert Mod 8TB

You should give your select elements IDs, so you can select them with document.getElementById(selectID):

Expand|Select|Wrap|Line Numbers

<select id="blah" ...>

PS. changed the thread title.

Dec 12 '07 #2

matwilko

Ok thanks i have done that. How can i not apply a similar code as used for the dropdown menu to link the 1st iframe and 2nd (so when i click an artist it appears with their songs). This is what i tried;

Expand|Select|Wrap|Line Numbers

 <script type='text/javascript'>

    Justin Timberlake=["fgfgtin Timberlake","Timbdgfgaland","Jafggfz Z","G Unfgit"];

    Eminem=["Emidfsgnem","50 fdgCent","Thfdge Game"];
 
  var s="";

  function show(choice){

    if(choice==1)song=Justin Timberlake;

    if(choice==2)song=Eminem;

    s="<form><select size='"+song.length+"'>";

    for(c=0;c<song.length;c++)

      s+="<option>"+song[c]+"</option>";

    s+="</select></form>";    

    with(document.parent.getElementById('examples3').contentDocument){

      open();

      write(s);

      close();

    }

  }

</script>

can you see any obvious problems with that way of doing it?
cheers

Dec 12 '07 #3

acoder

16,027

Expert Mod 8TB

can you see any obvious problems with that way of doing it?

Yes, you have a space. Remove the space, otherwise you will get errors.

Dec 13 '07 #4

by: Rod Early | last post by:

I need to know when the select element's dropdown list is opened (as when the user clicks on the arrow or does ALT-downarrow from the keyboard). Similarly, I need to known when the dropdown list...

Javascript

Dynamic SELECT dropdown box

by: Ganco | last post by:

We have a dropdown combobox, where some of the text is wider than the textarea. I cannot set the width of the SELECT any higher due to design restrictions on the company website. When clicking...

Javascript

IE 6 zoom property and SELECT elements

by: Francis Parsons | last post by:

Hi! I'm doubtful there's a workaround for this problem, but it's worth a shot. I'm using IE's (css) "zoom" property to zoom the body of a document (in conjunction with persistance so the...

HTML / CSS

Select only item in dropdown box

by: seansan | last post by:

Hi, I ahve an issue that I could tackle myself. sometimes a dropdown box is filled with only one element. How can I set this dropdown box to auto-select this one option? So in VB. If my...

Microsoft Access / VBA

Problem with IE when filling a select element per JavaScript andDOM

by: Oliver Hauger | last post by:

Hello, In my html form I show a select-element and if this element is clicked I fill it per JavaScript/DOM with option-elements. I use the following code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD...

Javascript

Controlling HTML SELECT vertical scroll bars

by: Matthew Cox | last post by:

Hi, I've been searching the net all day today trying to figure out how one would accomplish what I originally thought would be a fairly straight forward and simple thing. The problem I'm trying...

Javascript

Browser Bug: Select dropdown element's add() method doesn't work as expected (IE)

by: acoder | last post by:

Problem The select object's add method doesn't append options to the end of the list. Browser Internet Explorer Example The Javascript code for appending an option element at the end of a...

Javascript

<select> element problem inside popup

by: volynetsv | last post by:

Hello. I have a small problem, here's code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Select from dropdown element in iframe

Similar topics