In this article I will explain how to show and hide HTML DIV with TextBox based on DropDownList (HTML SELECT) selected value (selection) using JavaScript and jQuery.
When an option is selected in DropDownList then based on its selected value (selection), the HTML DIV with TextBox will be shown or hidden.
 
 
Show Hide DIV with TextBox based on DropDownList Selected Value (Selection) using jQuery
The HTML Markup consists of a HTML SELECT DropDownList and an HTML DIV consisting of a TextBox. The DropDownList has been assigned a jQuery OnChange event handler.
When an option is selected in the DropDownList, based on the selected value (selection) of the DropDownList, the HTML DIV with TextBox is shown or hidden.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#ddlPassport").change(function () {
            if ($(this).val() == "Y") {
                $("#dvPassport").show();
            } else {
                $("#dvPassport").hide();
            }
        });
    });
</script>
<span>Do you have Passport?</span>
<select id="ddlPassport">
    <option value="N">No</option>
    <option value="Y">Yes</option>
</select>
<hr />
<div id="dvPassport" style="display: none">
    Passport Number:
    <input type="text" id="txtPassportNumber" />
</div>
 
 
Screenshot
Show Hide DIV with TextBox based on DropDownList Selected Value (Selection) using jQuery
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads