SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot thetzfreak's Avatar
    Join Date
    Aug 2004
    Location
    United States
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How To Do Dropdown Text Change?

    Hey,

    I have a dropdown list in my form with many, many options, and I'd like different text to be displayed on the side when they options are rolled-over and selected. So, for example, it would be:

    Code:
    <tr><td><select><option value=1>1</option><option value=2>2</option></select></td>
    
    <td>[On select 1 or rollover 1, text "THIS IS MESSAGE ONE"][On select 2 or rollover 2, text "THIS IS MESSAGE TWO"]</td></tr>
    That it what I'm trying to accomplish. I'm sure in the second column of my table I'd need some kind of box that changes the text when an option is selected.

    Can someone please tell me how to do this, or what the code would be? I'm pretty new to JS.

    Thanks.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    First of all, you need to put quotation marks around your values in the option tags. Like so: <option value="1">.

    This works. Put it in your <head>.
    Code:
    window.onload = function() {
      var arr = new Array('message one','message two','message three');
      var sel = document.getElementsByTagName('select')[0];
      sel.onchange = function() {
        var item = parseInt(sel.value) - 1;
        document.getElementById('message').firstChild.nodeValue = arr[item];
      } 
    }
    HTML Code:
    <tr><td><select><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
    
    <td id="message">&nbsp;</td></tr>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •