从下拉菜单访问选定值

Question

I am having trouble in accessing the selected value from a dropdown menu. When I try to access the value selected in the javascript function displayPhoto, no value is being accessed at all (I tried to print it out in a textfield). Am I doing something wrong? Thanks!

Here is the HTML part:

<form id="colorChoice">
    <img id="photo" src="red.jpg" alt="red" />
    <select name="color" size=5>
         <option value="red" onclick="jsFunction()">Red</option>
         <option value="blue" onclick="jsFunction()">Blue</option>
         ...
    </select>
</form>

(I have tried this for 'onclick' and 'onchange' , both doesn't work.)

Here is the Javascript part:

function jsFunction(){
    var imageFile; = document.getElementById("colorChoice").color.value + ".jpg";
    ...
}  

Answer 1

You need to put onchange on the select element.

<form id="colorChoice">
    <img id="photo" src="red.jpg" alt="red" />
    <select name="color" id="color" size="5" onchange="jsFunction()">
         <option value="red">Red</option>
         <option value="blue">Blue</option>
         ...
    </select>
</form>

ther is also a ; in your function infront of imageFile

function jsFunction(){
 var imageFile = document.getElementById('color').value + '.jpg';
 alert(imageFile);
} 

Answer 2

Your Html Part be like that

<form id="colorChoice">
    <img id="photo" src="red.jpg" alt="red" />
    <select name="color" size="5" onchange="jsFunction()">
         <option value="red">Red</option>
         <option value="blue">Blue</option>
         ...
    </select>
</form>

and you jscript part would be like that

function jsFunction(){
    var imageFile = document.getElementById("colorChoice").color.value + ".jpg";
    ...
}  

Answer 3

You cannot select an item by "name" attribute when you are using getElementById. Rather set an ID for the select tag, like so:

    <form id="colorChoice">
        <img id="photo" src="red.jpg" alt="red" />
        <select id="color" size="5" onchange="jsFunction()">
             <option value="red">Red</option>
             <option value="blue">Blue</option>
             ...
        </select>
    </form>

And then have your js as follows:

function jsFunction(){
    var imageFile = document.getElementById("color").value + ".jpg";
    ...
}

Also note that I have taken the onchange() event as the above answers suggest.