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

Aarowaim · 01-21-2011, 01:49 AM

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.)

Logic Ali · 01-21-2011, 03:02 AM

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>

Aarowaim · 01-21-2011, 04:13 AM

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!