Javascript - <option> 中的 onchange答案

【问题标题】：Javascript - onchange within <option>Javascript - <option> 中的 onchange
【发布时间】：2008-12-15 12:30:23
【问题描述】：

我有一个相对简单的表格，可以提出各种问题。其中一个问题是通过选择框回答的。我想做的是，如果该人选择了一个特定选项，系统会提示他们提供更多信息。

在一些在线教程的帮助下，我设法让 Javascript 很好地显示隐藏的 div。我的问题是我似乎无法将事件本地化到选项标签，只有选择标签真的没用。

目前代码看起来像（简化代码以帮助清晰！）：

<select id="transfer_reason" name="transfer_reason onChange="javascript:showDiv('otherdetail');">
<option value="x">Reason 1</option>
<option value="y">Reason 2</option>
<option value="other">Other Reason</option>
</select>

<div id="otherdetail" style="display: none;">More Detail Here Please</div>

我想要的是，如果他们选择“其他原因”，它就会显示 div。如果 onChange 不能与 Option 标签一起使用，不知道如何实现这一点！

非常感谢任何帮助:)

注意：完全是 Javascript 的初学者，如果实现起来太简单了，我深表歉意！

【问题讨论】：

标签： javascript html

【解决方案1】：

为选择框设置onchange 事件处理程序以查看当前选定的索引。如果所选索引是“其他原因”选项的索引，则显示消息；否则，隐藏分区。

 <html>
 <head>
  <script type="text/javascript">
    window.onload = function() {
        var eSelect = document.getElementById('transfer_reason');
        var optOtherReason = document.getElementById('otherdetail');
        eSelect.onchange = function() {
            if(eSelect.selectedIndex === 2) {
                optOtherReason.style.display = 'block';
            } else {
                optOtherReason.style.display = 'none';
            }
        }
    }
  </script>
 </head>
 <body>
    <select id="transfer_reason" name="transfer_reason">
        <option value="x">Reason 1</option>
        <option value="y">Reason 2</option>
        <option value="other">Other Reason</option>
    </select>
    <div id="otherdetail" style="display: none;">More Detail Here Please</div>
</body>
</html>

就个人而言，我会更进一步，将 JavaScript 移动到外部文件中，然后将其包含在页面的标题中；但是，出于所有意图和目的，这应该有助于回答您的问题。

【讨论】：

【解决方案2】：

在阅读了 Tom 的出色回复后，我意识到如果我在表单中添加其他选项，它就会崩溃。在我的示例中，这很有可能，因为可以使用 php 管理面板添加/删除选项。

我做了一点阅读并对其进行了细微的修改，以便使用 value 而不是使用 selectedIndex。

<script type="text/javascript">
window.onload = function() {
    var eSelect = document.getElementById('transfer_reason');
    var optOtherReason = document.getElementById('otherdetail');
    eSelect.onchange = function() {
        if(eSelect.value === "Other") {
            optOtherReason.style.display = 'block';
        } else {
            optOtherReason.style.display = 'none';
        }
     }
  }
  </script>

希望这对将来的其他人有所帮助！

【讨论】：

【解决方案3】：

Tom 的回答很优雅，并且巧妙地将 JS 与 HTML 标记分开。如前所述，它甚至可以移动到外部文件。但是它给代码添加了很多“废话”，比如多个匿名函数分配等。

如果您想要快速解决方案，您也可以将其全部放在 select 标记内的 onchange() 中。选择你认为更合适的那个。

<select id="transfer_reason" name="transfer_reason" onchange="document.getElementById('otherdetail').style.display = (this.selectedIndex === 2) ? 'block' : 'none';">
    <option value="x">Reason 1</option>
    <option value="y">Reason 2</option>
    <option value="other">Other Reason</option>
</select>
<div id="otherdetail" style="display: none;">More Detail Here Please</div>

【讨论】：

我个人更喜欢设置类而不是样式属性；甚至可能是 div 的祖先（它可能是下拉菜单和 div 的公共容器；允许您多次使用相同的代码）
我刚刚修复了onchange，html是从问题中复制的。
Style 属性只是为了节省我复制 CSS 文件的时间，如上所述，为了清楚起见。