SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onchange Select box to show Different DIVs

    Hello,

    I want to have a select box be able to show a choosen Paragraph depending on the value choosen by the select box.

    Ex:

    <select name='color'>
    <option value='red'>red</option>
    <option value='yellow'>yellow</option>
    </select>


    If the person chooses 'red' then 'Roses are Red" would show (say in a textbox or div)

    If the person chooses 'yellow' then "The sun is yellow' shows up in a textbox or div.


    Any suggestions or help would be great.

    thank you.

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Seems to work

    I'm a Javascript rookie myself, so I thought I'd give your example a shot since it seemed if it should be relatively easy to do in Javascript and give me a chance to learn some JS while doing it.

    Basically what this script does is ask the user to select a poem by color, then replaces the text in the empty textarea with the appropriate choice.

    Note that if they reselect the blank option, it empties the textarea box as a side benefit.

    Code:
    <html>
        <head>
            <title>Select Box Example</title>
            <script type="text/javascript" language="JavaScript" >
            function changeText(oEvent) {
               document.getElementById("txt1").value='';
               var oTextbox = document.getElementById("txt1");
               var x = document.getElementById("color");
               valueS = x.options[x.selectedIndex].value; 
               if (valueS=='red')
               {
                  oTextbox.value += "Roses are Red"; 
               }
               if (valueS=='yellow')
               {
                  oTextbox.value += "The sun is yellow";
               }			           
           }
           </script>
        </head>
        <body>
            <p>Select a color to see a short poem.</p>
    
            <form name='colorSelect'>
               <select name='color' onChange="changeText(event)">
                  <option value=''>Select a Colour</option>
                  <option value='red'>red</option>
                  <option value='yellow'>yellow</option>
               </select>
            </form>
            <p><textarea id="txt1" rows="2" cols="30"></textarea></p>
        </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    May 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for the reply and start.

    Any idea why it doesnt work in FF 1.5?
    works in IE though

  4. #4
    SitePoint Zealot the DtTvB's Avatar
    Join Date
    Jul 2006
    Location
    Thailand
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because:
    Code:
    var x = document.getElementById("color");
    And
    HTML Code:
    <select name='color' onChange="changeText(event)">
    The select box doesn't have ID, and ID isn't name. Try change that to this
    HTML Code:
    <select name='color' onChange="changeText(event)" id="color">

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh thanks I see that. I guess IE cheats and uses name for ID? Anyway I forgot to test this in more than one browser, I used HTML-Kit to edit it, and its preview funciton emulates IE.

    Dave


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
  •