从下拉菜单访问所选值

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>

您的功能中还有一个;位于图片文件

答案 1 :(得分：0)

你的Html部分就是那样

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

你的jscript部分会是那样的

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

答案 2 :(得分：0)

使用getElementById时，无法通过“name”属性选择项目。而是为select标签设置ID，如下所示：

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

然后让你的js如下：

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

另请注意，我已经采取了onchange（）事件，如上面的答案所示。

Answer 2

你的Html部分就是那样

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

你的jscript部分会是那样的

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

Answer 3

使用getElementById时，无法通过“name”属性选择项目。而是为select标签设置ID，如下所示：

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

然后让你的js如下：

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

另请注意，我已经采取了onchange（）事件，如上面的答案所示。