Web Analytics Made Easy -
StatCounter I've seen this being done before, but don't know how - CodingForum

Announcement

Collapse
No announcement yet.

I've seen this being done before, but don't know how

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • I've seen this being done before, but don't know how

    I'm OK at JS, except I'm not a pro. I'm mostly into HTML/CSS and C++. So help me out here guys.

    I'm trying to do this:
    Code:
    <select size="2">
    <option name="op1" onfocus="document.write('Text1');">Text</option>
    <option name="op2" onfocus="document.write('Text2');">Text 2</option>
    </select>
    When Op1 is clicked, the document should say "Text1". When Op2 is clicked, I want the "Text" to turn into "Text2". How can I do this?

    Thanks guys. I enjoy all your help.

  • #2
    Please help! I need to know urgently!

    Comment


    • #3
      Lol... this seems very urgent

      PHP Code:
      <html>
      <
      head>
      <
      title>Text Change</title>
      <
      script type="text/javascript">
      function 
      changeText(){
          var 
      c=document.getElementById('combo');
          var 
      o=document.getElementById('output');
          
      o.removeChild(o.firstChild);
          
      o.appendChild(document.createTextNode(c.options[c.selectedIndex].text));
      }
      </
      script>
      </
      head>
      <
      body>

      <
      select size="2" id="combo" onchange="changeText()">
      <
      option name="op1">Text</option>
      <
      option name="op2">Text 2</option>
      </
      select>
      <
      div id="output">&nbsp;</div>
      </
      body>
      </
      html

      Comment


      • #4
        Wow your good at Javascript... But how do I make it say a sentence when someone clicks on "Text" and a different sentence when someone clicks "Text2"?

        Thanks for the help, you rock!

        Comment


        • #5
          Use the option.value method.

          Options.text contains the text that is shown for the option.
          Options.value contains the value that you want your form to submit when the option is selected...

          Code:
          <html>
          <head>
          <title>Text Change</title>
          <script type="text/javascript">
          function changeText(){
          	var c=document.getElementById('combo');
          	var o=document.getElementById('output');
          	o.removeChild(o.firstChild);
          	o.appendChild(document.createTextNode(c.options[c.selectedIndex].value));
          }
          </script>
          </head>
          <body>
          
          <select size="2" id="combo" onchange="changeText()">
          <option name="op1" value="Hello there, you are selecting Text">Text</option>
          <option name="op2" value="Well, text 2 is a good choice too.">Text 2</option>
          </select>
          <div id="output">&nbsp;</div>
          </body>
          </html>
          If you use this in a form, an entire sentance will get submitted... probably not what you want.

          Comment


          • #6
            Use an indexed array

            We can move our sentances into an array so that we can specify a more compact value for the options.

            Code:
            <html>
            <head>
            <title>Text Change</title>
            <script type="text/javascript">
            sentances = [
            	"The first option is not always the best.",
            	"The second option is always an option."
            ]; //end of sentances array.
            function changeText(){
            	var c=document.getElementById('combo');
            	var o=document.getElementById('output');
            	o.removeChild(o.firstChild);
            	o.appendChild(document.createTextNode(sentances[c.selectedIndex]));
            }
            
            </script>
            </head>
            <body>
            <form>
            <select size="2" name="combo" id="combo" onchange="changeText()">
            <option name="op1" value="op1Val">Text</option>
            <option name="op2" value="op2Val">Text 2</option>
            </select>
            <input type="submit" />
            </form>
            <div id="output">&nbsp;</div>
            </body>
            </html>
            notice the address bar when you select an option then submit the form.
            Last edited by VortexCortex; Oct 10, 2006, 01:37 PM. Reason: forgot to remove onselect="..." from options

            Comment


            • #7
              YOU ARE AWESOME! The script: A+++++++++++++++++ (lol)

              Thank you!

              Comment


              • #8
                1 problem: how to I get a new line? I tried \n and \r\n but it didn't work.

                Comment


                • #9
                  I hope you get an A on your assignment.
                  ||||If you are getting paid to do a job, don't ask for help on it!||||

                  Comment


                  • #10
                    Change the div to a pre

                    PHP Code:
                    <pre id="output">&nbsp;</pre

                    Comment


                    • #11
                      Thank you guys, especially VortexCortex, and guess what? I got an A+!

                      Comment

                      Working...
                      X