通过 onchange 事件将 SELECT 的值传递给 Javascript 函数？

Posted 2023-03-05

【中文标题】通过 onchange 事件将 SELECT 的值传递给 Javascript 函数？

【英文标题】：Pass the value of a SELECT to a Javascript function via the onchange event?

【发布时间】：2011-03-29 13:31:12

【问题描述】：

我有一个 html 页面，其中包含一个包含多个文本框的搜索框。

搜索框的第一部分是一个 SELECT 下拉列表，其中包含各种报告类型。每种报表类型都需要填写 1 个或多个文本框来过滤查询结果。我的目标是隐藏当前报表类型不需要的文本框。

如何通过 onchange 事件将当前选择的 值 从 SELECT 传递给 javascript 函数？

<select name="report_type" onchange="hide();">
<option value="full_history">Full History</option>
<option value="partial_history">Partial History</option>            
</select>

【问题讨论】：

问题误导。你写的是一个 php 问题，谈论 SELECT，这让我觉得你在谈论对数据库的请求。

@Alexander - 我删除了对 PHP 的引用

【参考方案1】：

<select name="report_type" onchange="hide(this.value);">
<option value="full_history">Full History</option>
<option value="partial_history">Partial History</option>            
</select>

执行此操作时，该函数具有选择当前具有的任何值。

【讨论】：

我知道这是旧的，但也许有人会看到它 - 我正在尝试做这样的事情，但我想传递选项标签中定义的值，而不是“值“本身。我该怎么做？ --- 例如，在上面的代码中，我想传递“full_history”（如 value="full_history"），但是 this.value 传递的是“Full History”。

@ZeekLTK 听起来选项没有设置value 属性，因此从选项本身获取文本。如果您将代码放在另一个问题中，那么它可能会提供比我从简单评论中获得的更多洞察力。

谢谢 Gabe，我想是晚上太晚了，我不小心遗漏或删除了等号，所以它只是 value"full_history"（使用上面的例子）。一旦我修复了语法（到 value="full_history"），它就会传递我想要的。谢谢。

【参考方案2】：

function f1()

var obj1= document.getElementById("img");
var obj2= document.getElementById("s1");
obj1.src=obj2.value;


Select Image:
    <select id="s1" onchange="f1()">
        <option value="img1.jpg">img1.jpg</option>
        <option value="img2.jpg">img2.jpg</option>
        <option value="img3.jpg">img3.jpg</option>
        <option value="img4.jpg">img4.jpg</option>

    </select> <br><br>
    <img id='img' src="img1.jpg"  >