javascript - 从下拉菜单访问选定值

Question

我在从下拉菜单中访问所选值时遇到问题。当我尝试访问在 javascript 函数 displayPhoto 中选择的值时，根本没有访问任何值(我试图在文本字段中打印出来)。难道我做错了什么？谢谢!

这是 HTML 部分:

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

(我已经为 'onclick' 和 'onchange' 试过了，两者都不起作用。)

这是 Javascript 部分:

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

Answer 1

您需要将 onchange 放在 select 元素上。

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

还有一个 ; 在你的函数前面的 imageFile

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