如何使用选择/选项标签在表单元素中触发 HTML 中的 JS 函数？答案

【问题标题】：How do I trigger JS functions in HTML within a form element using select/option tags?如何使用选择/选项标签在表单元素中触发 HTML 中的 JS 函数？
【发布时间】：2021-11-26 18:57:29
【问题描述】：

我正在开发一个使用 HTML 和 JS 的网络脚本生成器。用户输入值，输出自动生成/更新输入值的每次更改，使用 onChange、onKeyUp 或 OnClick 事件触发器触发当前表单值通过 JS 函数运行。

任何输入元素，包括文本和单选类型，都可以正常工作，但为了节省空间，我想使用 select 或 datalist plus option 元素将一些单选列表转换为下拉菜单。但是，进行这种转换似乎会破坏事情并且函数不再运行或输出不生成。

我猜这里缺少一些基本的形式概念。这里的代码 sn-p 显示了我正在尝试做的事情的简化摘要。我尝试了在选项标签和选择标签中包含事件触发器 onSelect、onChange 和 onClick 的变体，但没有任何乐趣。使用数据列表也是如此。有谁知道我做错了什么？

不起作用：

<head>
<script type="text/javascript" src="functions.js"></script>
</head>

<body>
<form name="example">
<div>
    <table>
        <tr><td>Speed</td></tr>
        <tr>
            <td>
                <select name="speed" onChange="exampleName()">
                    <option value="5M" >5M</option>
                    <option value="10M">10M</option>
                    <option value="15M">15M</option>
                </select>
            </td>
        </tr>
    </table>
</div>
</form>
</body>

作品：

<head>
<script type="text/javascript" src="functions.js"></script>
</head>

<body>
<form name="example">
<div>
    <table>
        <tr><td>Speed</td></tr>
        <tr><td><input type="radio" name="speed" value="5M" onClick="exampleName()" checked="" >5M</input></td></tr>
        <tr><td><input type="radio" name="speed" value="10M" onClick="exampleName()">10M</input></td></tr>
        <tr><td><input type="radio" name="speed" value="15M" onClick="exampleName()">15M</input></td></tr>
    </table>
</div>
</form>
</body>

【问题讨论】：

你能在 onChange-attribute 中调用别的东西吗，比如 console.log？
你可能有同样的问题stackoverflow.com/a/14919957/16688813

标签： javascript html

【解决方案1】：

在浏览完所有代码后，我发现了我的问题。这不是命名问题，甚至也不是真正的 HTML 问题。实际上是 JS 被设置为通过无线电输入解析以查找选中的字段。这不适用于选择/选项，因为它们处于“选中”与“选中”状态。

【讨论】：