Make dropdown menu text a td caption?

@robmJun 11.2005

Hey guys. I’ve got a dropdown box which I want to have change the text inside a table cell. If the user selects “Jan.26”, for example, I’d like to have “Jan.26” appear in a table cell. (Can’t use the value parameter as it’s a web address that’s used for something else..) I would like to do something like:

[code=php] <form name=”form1″> <select id = “select” onChange = “otherfunction() document.all(“td1″).innerText = document.form1.select.text.value ;”> <option value=”C:WebpageNewmar26.html”>Mar.26</option> <option value=…..> etc. </select> </form> [/code]

However that doesn’t work – not sure what I’m doing wrong. Tried giving the td both a name and ID and that didn’t seem to change anything. I also don’t know how to obtain the value that’s selected, so 2 problems I guess.

Thanks in advance for any insight!

to post a comment

JavaScript

5 Comments(s) _↴

@CharlesJun 11.2005 — #

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta name="Content-Script-Type" content="text/javascript"&gt;
 &lt;meta name="Content-Style-Type" content="text/css"&gt;
 &lt;title&gt;Example&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div&gt;
 &lt;select onchange="document.getElementById ('display').firstChild.data = this.options[this.selectedIndex].text"&gt;
 &lt;option&gt;Fee&lt;/option&gt;
 &lt;option&gt;Fie&lt;/option&gt;
 &lt;option&gt;Foe&lt;/option&gt;
 &lt;option&gt;Fum&lt;/option&gt;
 &lt;/select&gt;
 &lt;/div&gt;
 
 &lt;div id="display"&gt;&amp;nbsp;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

And from the HTML 4.01 Specification:Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.[/quote]

@robmauthorJun 12.2005 — #Hmmm...Charles, that code definately works but not when I implement it in my code. Is there a reason it wouldn't work if the menu was inside a form? (Mine is inside a form.)

@CharlesJun 12.2005 — #Please post the URL.

@robmauthorJun 12.2005 — #Here's a simplified version:

[code=php]
 <html>
 <head>
 
 <script type = "text/javascript"> 
 
  do{
  var unrounded = Math.random()*15;
  var randomnum = Math.round(unrounded) + 1;
  }while(randomnum == 16);   //change to randoumnum = 1 + (actual number of pictures)
 
 </script>
 
 </head>
 
 <body style = "margin-top: 0 px; margin-bottom: 0 px">
 
 <CENTER>
 <!--First table--><TABLE WIDTH = 763  BORDER = 0 CELLSPACING = 0 CELLPADDING = 0>
 <!-- Spacer Row--><TR><TD HEIGHT = 5 px BGCOLOR = #474747 colspan = 3></TD></TR>
 <TR><TD WIDTH = 10px bgcolor = #474747><!--was 10--></TD><TD BGCOLOR = "#474747"><H2>Pictures|</H2><DIV ID = "captiondiv">&nbsp;</DIV> 
 
   <script language="javascript" type="text/javascript">
   function jump(form) {
   var myindex=form.menu.selectedIndex
   if (form.menu.options[myindex].value != "null") 
   {
   window.open(form.menu.options[myindex].value, 
   target="iframe");
   document.iframediv.style.visibility='visible';
   }
   }
   //-->
   </script>
 <div name = "divdropdown" style = "position:relative; top:-42px; left:550px;"> 
 <form name = "form1">
 <select id = "select" style="font-size:11px;color:white;font-family:Tahoma;background-color:#474747;font-weight:bold;" name="menu" onChange = "jump(this.form); document.getElementById ('captiondiv').firstChild.data = this.options[this.selectedIndex].text ;"> <option value='null'>-------Select Date-------</option>
 <option value='null'></option>
 <option value='null'>----------'04/'05---------</option>
 <option value="C:WebpageNewmar26.html">Mar.26</option>
 <option value="C:WebpageNewfeb27.html">Feb. 27</option>
 <option value="feb26pics">Feb. 26</option>
 <option value="feb20pics">Feb. 20</option>
 <option value="feb19pics">Feb. 19</option>
 <option value="feb13pics">Feb. 13</option>
 <option value="jan30pics">Jan. 30</option>
 <option value="jan29pics">Jan. 29</option>
 <option value="jan23pics">Jan. 23</option>
 <option value="jan2pics">Jan. 2</option>
 <option value="dec26pics">Dec. 26</option>
 <option value="snowcrosspics">Snowcross</option>
 <option value="undatedpics">Undated</option>
 <option value='null'>----------'03/'04---------</option>
 <option value="oldpics">All</option>
 </select>
 </form>
 </div>
 
 <DIV ID = "iframediv" style = "position: relative; top:-42px; left:548px; visibility:visible">
 <IFRAME NAME = "iframe" SRC = "C:WebpageNewiframe.html" WIDTH = "163" HEIGHT = "300" SCROLLING = auto FRAMEBORDER = 0> </IFRAME>
 </DIV>
 
 <SCRIPT TYPE = "text/javascript">
 var width = screen.width;
 var height = screen.height;
 </SCRIPT>
 
 
 <SCRIPT TYPE = "text/javascript">
 document.write(' <DIV ID = "picdiv" style = "position: relative; top:-342px; left:54px; visibility:visible"><!--was 32--> ');
 document.write(' <A HREF = "javascript:void"><IMG  NAME = "mainimage" HEIGHT = 300 WIDTH = 350 BORDER = 0 SRC = "http://home.cc.umanitoba.ca/~ummcdour/mar26pics/'+randomnum+'.JPG" onClick = window.open(this.src,"picture","scrollbars=1,toolbar=0,resizable=1,top=0,left=0"); onmouseover="window.status='Click to enlarge'; return true" onMouseout="window.status='Done'; return true" ;></A> ');
 document.write(' </DIV> ');
 </SCRIPT>
 
 
 </TD><TD WIDTH = 10px bgcolor = #474747></TD></TR>
 <TR><TD colspan = 3 BGCOLOR = red><IMG SRC = "C:WebpageNewtablebottom.jpg"></TD></TR>
 </TABLE>
 </CENTER>
 
 </body>
 </html>
 [/code]

@robmauthorJun 12.2005 — #Well I've got it to work (sort of) using a variation of the above code, but another problem has arisen...the text will only show up if there is no action associated with selecting it (that is, the value is equal to 'null'). When there is a non-null value, it won't show up.

Anybody?

Also in #JavaScript _↴

automatic view picture script Change CSS of an IFRAME Publishing a web page with javascript

Success!

Help @robm spread the word by sharing this article on Twitter...

Tweet This

Make dropdown menu text a td caption?

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Make dropdown menu text a td caption?

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴