从下拉菜单访问“选定值”

Accessing Selected Value from a Pulldown menu

本文关键字：选定值 下拉菜单 访问      更新时间：2023-09-26

我在从下拉菜单访问所选值时遇到问题。当我试图访问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>

（我已经为"取消锁定"和‘取消更改’尝试过这两种方法，但都不起作用。）

这是Javascript部分：

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

您需要将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);
}

您的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";
    ...
}

使用getElementById时，不能通过"name"属性选择项目。而是为选择标签设置一个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（）事件。

相关文章：