Show and hide html element on selected option change

Question

In a JSP page, I have a dropdown list. When the first element of the list is selected, I want a text area to show right on click. I\'m new to Javascript/Jquery, so I\'m obvi

Answer 1

var drpVal=  $('#show').val();
if( drpVal == "1")
{
     $('#text_area').show(); 
          // or u can use
       $("#text_area").css("display", "");
 }
 else{
  $('#text_area').hide(); 
          // or u can use
       $("#text_area").css("display", "none");
 }

Answer 2

Try this code:

// This will create an event listener for the change action on the element with ID 'show'
$('#show').change(function() {

     // If checkbox is 'checked'
    if($(this).is(':checked')) {
        // show the element that has the id 'txt_area' 
        $('#text_area').show();
    } else {
        // hide it when not checked
        $('#text_area').hide();
    }
});

Answer 3

You can use jQuery as following

<script> function change() {
    var selectBox = document.getElementById("show");
    var selected = selectBox.options[selectBox.selectedIndex].value;

    if(selected === '1'){
        $('#text_area').show();
    }
    else{
        $('#text_area').hide();
    }
}</script>

Answer 4

You are getting the html element by document.getElementById that returns normal javascript object. Jquery methods hide() and show() are available for jquery objects only.

But whatever you want to achieve can be achieved by simple Javascript, just made some simple changes.

instead of show() and hide() use respectively textarea.style.display = "block" and textarea.style.display = "none";

and remove the ); in the end of your code.

use the fiddle link for working example. fiddle link