Javascript-onchange <option>

我有一个相对简单的形式，提出了各种问题。其中一个问题通过选择框回答。我想要做的是，如果这个人选择了一个特定的选项，他们会被要求提供更多信息。Javascript-onchange <option>

在几个在线教程的帮助下，我设法让Javascript显示一个隐藏的div就好了。我的问题是我似乎无法将该事件本地化为Option标签，只有Select标签没有用。

目前的代码如下所示（简化为清楚起见代码！）：

<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，我道歉，如果这是愚蠢的简单实现！

来源

2008-12-15 suitedupgeek

设置选择框的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插入外部文件，只是其包括在页的标头;然而，对于所有意图和目的，这应该有助于回答你的问题。

来源

2008-12-15 12:34:32 Tom

在阅读了汤姆的回应之后，我意识到如果我在表格中添加其他选项，它会中断。在我的例子中，这很可能，因为可以使用php管理面板添加/删除选项。

我做了一点阅读和改变它非常轻微，这样，而不是使用的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>

希望这可以帮助别人在未来！

来源

2008-12-15 13:00:48 suitedupgeek

汤姆的回答很优雅，整齐地将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>

来源

2008-12-15 13:03:20 Tuminoid

我个人更喜欢设置一个类而不是样式属性;甚至可能是div的祖先（这可能是下拉和div的共同容器;允许您多次使用相同的代码） – bart 2008-12-15 13:20:38

Javascript-onchange <option>

回答

相关问题