在下拉列表中使div可见

Question

I am developing the asp.net mvc application . my one of forms requirement is that: It has dropdown filling up with let say A,B,C values. If selected A then on UI there should be 2 text boxes should be visible and other should be invisible , if selected B, then must be add another 2 text boxes , i this way there should be 4 text boxes. same for selection of C. I able to get the selected value by

$(document).ready(function() {

    $('#NatureOfTransactionDropDown').change(function() {

        var element = $(this).find('option').filter(':selected').text();
        alert(element);
        if (element == "A") {
           //code
          }
    });
});

What I have to do. I tried hide() show(), but i think it is not working for me.

Answer 1

use .css("display", "none"); for hiding,
and .css("display", "block"); for showing