By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,564 Members | 1,070 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,564 IT Pros & Developers. It's quick & easy.

Select from dropdown element in iframe

P: 2
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
  1. <html>
  2. <head>
  3. <title>MiTunes</title>
  4. <style>
  5. .k4 {
  6.     font-family: "Courier New", Courier, monospace;
  7.     font-size: large;
  8.     font-style: normal;
  9.     font-weight: bold;
  10.     text-transform: uppercase;
  11.     color: #666666;
  12.     background-color: #CCCCCC;
  13.     letter-spacing: normal;
  14.     text-align: center;
  15.     word-spacing: normal;
  16.     border: thin inset #666666;
  17.     position: fixed;
  18. }
  19. .style1 {
  20.     color: #0099FF;
  21.     font-size: 24px;
  22.     font-weight: bold;
  23. }
  24. .style2 {
  25.     color: #000099;
  26.     font-size: 24px;
  27.     font-weight: bold;
  28. }
  29. .style3 {
  30.     color: #0033FF;
  31.     font-size: 24px;
  32.     font-weight: bold;
  33. }
  34. .style4 {color: #000099; font-size: x-large; }
  35. .style5 {color: #003366; font-size: x-large; font-weight:bold }
  36. </style>
  37. <script type='text/javascript'>
  38.     RnB=["Justin Timberlake","Timbaland","Jaz Z","G Unit"];
  39.     Rap=["Eminem","50 Cent","The Game"];
  40.   var s="";
  41.   function show(choice){
  42.     if(choice==1)music=RnB;
  43.     if(choice==2)music=Rap;
  44.     s="<form><select size='"+music.length+"'>";
  45.     for(c=0;c<music.length;c++)
  46.       s+="<option>"+music[c]+"</option>";
  47.     s+="</select></form>";    
  48.     with(document.getElementById('examples').contentDocument){
  49.       open();
  50.       write(s);
  51.       close();
  52.     }
  53.   }
  54. </script>
  55. <script type='text/javascript'>
  56.     RnB=["Justin Timberlake","Timbaland","Jaz Z","G Unit"];
  57.     Rap=["Eminem","50 Cent","The Game"];
  58.  
  59.   var s="";
  60.   function show(choice){
  61.     if(choice==1)music=RnB;
  62.     if(choice==2)music=Rap;
  63.     s="<form><select size='"+music.length+"'>";
  64.     for(c=0;c<music.length;c++)
  65.       s+="<option>"+music[c]+"</option>";
  66.     s+="</select></form>";    
  67.     with(document.getElementById('examples2').contentDocument){
  68.       open();
  69.       write(s);
  70.       close();
  71.     }
  72.   }
  73. </script>
  74. <script type='text/javascript'>
  75.     Justin Timberlake=["Lovestoned","Gay Boy"];
  76.     Eminem=["Mockingbird","Wrapper"];
  77.  
  78.     var t="";
  79.     function show(artist){
  80.         if(artist==1)song="Justin Timberlake";
  81.         if(artist==2)song="Eminem";
  82.     for(c=0;c<song.length;c++)
  83.         with(document.getElementById('examples3'.contentDocument){
  84.         open()
  85.         write(t)
  86.         close()
  87.         }
  88. </script>
  89. </head>
  90. <body>
  91.   <p>Select Genre</p>
  92.   <form>
  93.     <select name="select" onChange="show(this.selectedIndex);">
  94.       <option>Select</option>
  95.       <option>RnB</option>
  96.       <option>Rap</option>
  97.     </select>
  98.   </form>
  99. <p>
  100.     <iframe width="300" height="300" id='examples2'></iframe>
  101.     <iframe width="300" height="300" id='examples3'></iframe>
  102.     <iframe width="300" height="300" id='examples4'></iframe>
  103. <head>
  104. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  105. <title></title>
  106. <script type='text/javascript'>
  107. function addIt(cKey)
  108. {
  109. d = document.forms["foo"].elements["bar"];
  110. d.value =  (cKey.value=='backspace') ? d.value.slice(0,-1) : d.value+cKey.value;
  111. }
  112. </script>
  113. <body>
  114. <div><form name="foo" action=''>
  115. <fieldset><legend class="style4">Keyboard</legend>
  116.  
  117. <table width="950" height="176" border="1" align="center" cellpadding="2" cellspacing="2">
  118.   <tr>
  119.     <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>
  120.     <td width="39" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=W></td>
  121.     <td width="39" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=E></td>
  122.     <td width="39" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=R></td>
  123.     <td width="39" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=T></td>
  124.     <td width="39" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=Y></td>
  125.     <td width="39" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=U></td>
  126.     <td width="43" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=I></td>
  127.     <td width="43" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=O></td>
  128.     <td width="43" align="center" valign="middle" bgcolor="#000099"><INPUT name="Button" type=button class=style1  onClick="addIt(this)" value=P></td>
  129.     <td colspan="2" align="center" bgcolor="#000099">
  130.       <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>
  131.   <tr>
  132.     <td height="54" align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=A></td>
  133.     <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=S></td>
  134.     <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=D></td>
  135.     <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=F></td>
  136.     <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=G></td>
  137.     <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=H></td>
  138.     <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=J></td>
  139.     <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=K></td>
  140.     <td align="center" valign="middle" bgcolor="#0033CC"><INPUT name="Button" type=button class=style2  onClick="addIt(this)" value=L></td>
  141.     <td bgcolor="#0033CC" span class="style1"> </span></td>
  142.     <td width="192" bgcolor="#0033CC">&nbsp;</td>
  143.     <td width="224" bgcolor="#0033CC">&nbsp;</td>
  144.   </tr>
  145.   <tr>
  146.     <td height="58" align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=Z></td>
  147.     <td align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=X></td>
  148.     <td align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=C></td>
  149.     <td align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=V></td>
  150.     <td align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=B></td>
  151.     <td align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=N></td>
  152.     <td align="center" valign="middle" bgcolor="#0099FF"><INPUT name="Button" type=button class=style3  onClick="addIt(this)" value=M></td>
  153.       <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>
  154.       <td bgcolor="#0099FF">
  155.     <td bgcolor="#0099FF">
  156.   </tr>
  157. </table>
  158. </body>
  159.     </iframe>
  160.   </p>
  161.   <script type='text/javascript'>
  162.     Justin Timberlake=["Justin Timberlake","Timbaland","Jaz Z","G Unit"];
  163.     Timbaland=["Eminem","50 Cent","The Game"];  
  164.     var t="";
  165.   function show(song){
  166.     if(choice==1)song=Justin Timberlake;
  167.     if(choice==2)song=Timbaland;
  168.     t="<form><select size='"+music.length+"'>";
  169.     for(c=0;c<music.length;c++)
  170.       t+="<option>"+music[c]+"</option>";
  171.     t+="</select></form>";    
  172.     with(document.getElementById('examples2').contentDocument){
  173.       open();
  174.       write(s);
  175.       close();
  176.       </script>
  177. <script type='text/javascript'>;
  178.     Justin Timberlake=["Justin Timberlake","Timbaland","Jaz Z","G Unit"];
  179.     Timbaland=["Eminem","50 Cent","The Game"];
  180.  
  181.   var t="";
  182.   function show(song){
  183.     if(choice==1)song=Justin Timberlake;
  184.     if(choice==2)song=Timbaland;
  185.     t="<form><select size='"+song.length+"'>";
  186.     for(c=0;c<song.length;c++)
  187.       t+="<option>"+song[t]+"</option>";
  188.     t+="</select></form>";    
  189.     with(document.getElementById('examples3').contentDocument){
  190.       open();
  191.       write(t);
  192.       close();
  193.     }
  194.   }
  195.   </script>
  196. </body>
  197. </html>
Dec 11 '07 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
You should give your select elements IDs, so you can select them with document.getElementById(selectID):
Expand|Select|Wrap|Line Numbers
  1. <select id="blah" ...>
PS. changed the thread title.
Dec 12 '07 #2

P: 2
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
  1. <script type='text/javascript'>
  2.     Justin Timberlake=["fgfgtin Timberlake","Timbdgfgaland","Jafggfz Z","G Unfgit"];
  3.     Eminem=["Emidfsgnem","50 fdgCent","Thfdge Game"];
  4.  
  5.   var s="";
  6.   function show(choice){
  7.     if(choice==1)song=Justin Timberlake;
  8.     if(choice==2)song=Eminem;
  9.     s="<form><select size='"+song.length+"'>";
  10.     for(c=0;c<song.length;c++)
  11.       s+="<option>"+song[c]+"</option>";
  12.     s+="</select></form>";    
  13.     with(document.parent.getElementById('examples3').contentDocument){
  14.       open();
  15.       write(s);
  16.       close();
  17.     }
  18.   }
  19. </script>
can you see any obvious problems with that way of doing it?
cheers
Dec 12 '07 #3

acoder
Expert Mod 15k+
P: 16,027
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

Post your reply

Sign in to post your reply or Sign up for a free account.