Category >
JQUERY
|| Published on :
Tuesday, June 23, 2015 || Views:
8463
||
jQuery DropDownList Div show or hide div textbox on dropdown or HTML select(Selection) using jQuery
Here we are going to learn with an example, How can show or hide div textbox on dropdown or HTML select(Selection) using jQuery
The condition is very simple, we have a asp.net dropdownlist or HTML Select and a textbox and when dropdown changes the textbox will be show or hide so lets starts the coding.
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.
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.
Step 1: Create a HTML webpage with following HTML codes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
</html>
Step 2: Add the following controls on the HTML page
<span>Do you have Laptop?</span>
<select id="ddlLaptop">
<option value="N">No</option>
<option value="Y">Yes</option>
</select>
<hr />
<div id="dvLaptop" style="display: none">
Laptop Brand:
<input type="text" id="txtLaptopBrand" />
</div>
Step 3: Write the javascript codes using jQuery in the Head Section of the HTML Page
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ddlLaptop").change(function () {
if ($(this).val() == "Y") {
$("#dvLaptop").show();
} else {
$("#dvLaptop").hide();
}
});
});
</script>
Final HTML Codes for the show or hide div textbox on dropdown or HTML select(Selection) using jQuery are below:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#ddlLaptop").change(function () {
if ($(this).val() == "Y") {
$("#dvLaptop").show();
} else {
$("#dvLaptop").hide();
}
});
});
</script>
</head>
<body>
<span>Do you have Laptop?</span>
<select id="ddlLaptop">
<option value="N">No</option>
<option value="Y">Yes</option>
</select>
<hr />
<div id="dvLaptop" style="display: none">
Laptop Brand:
<input type="text" id="txtLaptopBrand" />
</div>
</body>
</html>
so, In this short tutorial we have learned how to How can show or hide div textbox on dropdown or HTML select(Selection) using jQuery