Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    writing the id of an <option> using a selected <select> tag

    I couldn't think of a way to explain my idea thoroughly, but I'm learning javascript and I have an html <select> form selected by using getElementById. Now, how do I access the data within the option tags to write to a variable? I know there are many simple ways of making it so that the value of the options are the html color name rather than hex code, but I'm doing this to learn javascript.

    I have experience with ruby (ok, not THAT much, but I understand the concepts). Anyway's the code explains my problem much better, so here it is:
    Code:
    <body>
        <form action= "">
            <fieldset>
                <select id="selColor">
                    <option value="FFFFFF">White</option>
                    <option value="#A9A9A9">Gray</option>
                    <option value="#000000">Black</option>
                    <option value="#FF0000">Red</option>
                    <option value="#FFA500">Orange</option>
                    <option value="FFFF00">Yellow</option>
                    <option value="#9ACD32">Green</option>
                    <option value="#0000FF">Blue</option>
                    <option value="#4B0082">Indigo</option>
                    <option value="#9400D3">Violet</option>
                </select>
    
                <input type="button" 
                       value="Change Color" 
                       onclick="changeColor()" />
            </fieldset>
        </form>
    <script type="text/javascript">
        //<![CDATA[
        function changeColor() {
            var selColor = document.getElementById("selColor")
            var color = selColor.value
            var colorid = 
            if (confirm("would you like to change color to "+colorid+"?")) {
                document.body.style.backgroundColor = color
            }
    
        }
        //]]>
    </script>
    
    </body>
    I haven't initialized var colorid, but I'm trying to set it to either of the highlighted parts of the following piece of my code.
    <option id="white" value="FFFFFF">White</option>

    I want to access that part of the option tags of the element that the user selects. So, without changing the hex values to the color equivalent, how do I access the name of the selected option tag? ( I could make an if/switch statement to translate the hex color into a name and put it into the variable, but I would like to know how to do what I'm asking in case I run into a similair problem.)
    Last edited by Aarowaim; 01-21-2011 at 05:28 AM.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    You don't need to use an ID for the options:
    Code:
    function changeColor() {
            var selColor = document.getElementById("selColor");
                    
            if ( confirm( "would you like to change color to "+ selColor.options[ selColor.selectedIndex ].text + "?" )) {
                document.body.style.backgroundColor = selColor.value;
            }
    
        }
    Here's a method that eliminates the button:
    Code:
    <script type="text/javascript">
    //<![CDATA[
        
    document.getElementById("selColor").onchange = function()
    {               
     if( confirm( "would you like to change color to "+ this.options[ this.selectedIndex ].text + "?" )) 
      document.body.style.backgroundColor = this.value;
    }
    
    //]]>
    </script>

  • #3
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help! I would've never noticed that options tags are basically an array and that I could use the selectedIndex tag to access that array. That really helps, and the text object will be very useful for me later on.
    And That buttonless method is pretty useful too, but it only works because I have that confirm lol. good use of context to make more efficient code.
    Thanks again!
    Last edited by Aarowaim; 01-21-2011 at 05:31 AM.


  •  

    Tags for this Thread

    Posting Permissions

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