Fatal编程技术网

Javascript-在<；选项>；

javascript html

Javascript-在<；选项>；,javascript,html,Javascript,Html,我有一个相对简单的表格，可以问很多问题。其中一个问题通过选择框回答。我想做的是，如果这个人选择了一个特定的选项，他们会被提示提供更多信息 在一些在线教程的帮助下，我成功地让Javascript显示了一个隐藏的div。我的问题是，我似乎无法将事件定位到选项标记，只有选择标记，这实际上是没有用的 目前代码看起来像（代码简化以帮助清晰！） 为选择框设置onchange事件处理程序以查看当前选定的索引。如果所选索引是“其他原因”选项的索引，则显示消息；否则，隐藏分区 <html> <

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

在一些在线教程的帮助下，我成功地让Javascript显示了一个隐藏的div。我的问题是，我似乎无法将事件定位到选项标记，只有选择标记，这实际上是没有用的

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

为选择框设置
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>




window.onload=函数（）{
var eSelect=document.getElementById（'transfer_reason'）；
var optOtherReason=document.getElementById（'otherdetail'）；
eSelect.onchange=函数（）{
如果（eSelect.selectedIndex==2）{
optOtherReason.style.display='block'；
}否则{
optOtherReason.style.display='none'；
}
}
}
理由1
理由2
其他原因
请在这里详细说明



就我个人而言，我会更进一步，将JavaScript移到一个外部文件中，并将其包含在页面的标题中；然而，无论出于何种目的，这都有助于回答您的问题。
在阅读了Tom的精彩回复后，我意识到，如果我在表单中添加其他选项，表单就会崩溃。在我的示例中，这很有可能，因为可以使用php管理面板添加/删除选项

我做了一点阅读，并对它做了细微的修改，因此它没有使用selectedIndex，而是使用value


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




window.onload=函数（）{
var eSelect=document.getElementById（'transfer_reason'）；
var optOtherReason=document.getElementById（'otherdetail'）；
eSelect.onchange=函数（）{
如果（eSelect.value==“其他”）{
optOtherReason.style.display='block'；
}否则{
optOtherReason.style.display='none'；
}
}
}



希望这对以后的其他人有帮助
 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>




理由1
理由2
其他原因
请在这里详细说明

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

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