ansaurus

Question

Answer 1

+3 A:

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 intensive purposes, this should help answer your question.

Tom 2008-12-15 12:34:32

Perfect, very much appreciated!

foxed 2008-12-15 12:42:02

Answer 2

+2 A:

After reading Tom's great response, I realised that if I ever added other options to my form it would break. In my example this is quite likely, because the options can be added/deleted using a php admin panel.

I did a little reading and altered it ever so slightly so that rather than using selectedIndex it uses value instead.

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

Hope this helps someone else in the future!

foxed 2008-12-15 13:00:48

Answer 3

+1 A:

Tom's answer is elegant, and neatly puts the JS away from the HTML markup. As mentioned, it could be even moved to an external file. However it adds quite much "nonsense" to the code, like multiple anonymous function assignments etc.

If you want quick solution, you can put it all in the onchange() inside the select tag as well. Pick the one you see more fit.

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

Tuminoid 2008-12-15 13:03:20

Personally I prefer setting a class instead of a style property; possibly even of an ancestor of the div (which could be a common container to both the dropdown and the div; that allows you to use the same code more than once)

bart 2008-12-15 13:20:38

I just fixed the onchange, the html was copied from the question.

Tuminoid 2008-12-15 13:23:50

Style property was just to save me copying out the CSS file too, as mentioned above, for clarity.

foxed 2008-12-15 15:25:23

ansaurus

tags:

views:

answers:

Javascript - onchange within <option>

related questions