Javascript - < option>中的onchange [英] Javascript - onchange within <option>
问题描述
我有一个相对简单的形式，提出了各种问题。其中一个问题通过选择框回答。我想要做的是，如果这个人选择了一个特定的选项，他们会被要求提供更多信息。
在一些在线教程的帮助下，我管理让Javascript显示一个隐藏的div就好了。我的问题是我似乎无法将事件本地化为Option标签，只有Select标签没有用。
目前代码看起来像（ ）：
< select id =transfer_reasonname =transfer_reason onChange =javascript：showDiv （'otherdetail'）;>
< option value =x>原因1< / option>
< option value =y>原因2< / option> $其他原因< / option>
< / select>
< div id =otherdetailstyle =display：none ;>更多详细信息Please< / div>
我想如果他们选择其他原因然后显示div。如果onChange不能与Option标签一起使用，不知道如何实现这个功能！
p>
注意：当谈到Javascript时，完全初学者，如果这实在太简单了，我很抱歉！
< 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_reasonname =transfer_reason>
< option value =x>原因1< / option>
< option value =y>原因2< / option>
< option value =other>其他原因< / option>
< / select>
< div id =otherdetailstyle =display：none;>详情请点击< / div>
< / body>
< / html>
就我个人而言，我会更进一步，将JavaScript移到外部文件中，它在页面的标题中;但是，对于所有意图和目的，这应该有助于回答您的问题。
I have a relatively simple form which asks a variety of questions. One of those questions is answered via a Select Box. What I would like to do is if the person selects a particular option, they are prompted for more information.
With the help of a few online tutorials, I've managed to get the Javascript to display a hidden div just fine. My problem is I can't seem to localise the event to the Option tag, only the Select tag which is no use really.
At the moment the code looks like (code simplified to aid clarity!):
<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>
What I would like is if they choose "Other Reason" it then displays the div. Not sure how I achieve this if onChange can't be used with the Option tag!
Any assistance much appreciated :)
Note: Complete beginner when it comes to Javascript, I apologise if this is stupidly simple to achieve!
Setup the onchange event handler for the select box to look at the currently selected index. If the selected index is that of the 'Other Reason' option, then display the message; otherwise, hide the division.
<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>
Personally, I'd take it a step further and move the JavaScript into an external file and just include it in the header of the page; however, for all intents and purposes, this should help answer your question.
这篇关于Javascript - < option>中的onchange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
