How to work with sliding textbox in JQuery using asp.net C#
Today i want to discuss an article how to work with Sliding a textbox using asp.net and JQuery based on a dropdown selection Item list using asp.net and C#.
In this Article i will show the Code Snippets and Screen shots .
If you have got a Scenario to work with Sliding a textbox based on the selection of an Item in a dropdownlist Using Jquery in Asp.net. This Article will describe how to work with that .
Look at the below Screen shot at first you have no visibility of the Textbox in that after the selection of the Dropdownlist i had a textbox available in the Form.
after the selection of the Dropdownlist i will slide one textbox using Jquery 
Now look at the textbox visible in the below Screen shot as soon as i select as shipped...
This can be achieved by below Code in that...
This is the HTML Code in the aspx page
li class="tracker_box" id="tracker" runat="server"
label
Tracker# :label asp:TextBox ID="txtTracker" Visible="true" runat="server"
asp:TextBox
li
asp:HiddenField ID="HduserName" runat="server"
asp:HiddenField ID="HdBPID" runat="server"
ul
<script type="text/javascript">
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
$('.status_select').live("change", function () {
var this_val = $(this).val();
if (this_val == '1') {
$('.tracker_box').show('slow');
return false;
}
if (this_val == '2') {
$('.tracker_box').show('slow');
}
else {
$('.tracker_box').hide('slow');
}
});
</SCRIPT>
asp:DropDownList ID="ddlStatus" runat="server" CssClass='status_select'
asp:ListItem Text="In Process" Selected="True" Value="0" asp:ListItem
asp:ListItem Text="Shipped" Value="1" asp:ListItem
asp:ListItem Text="Next Day Delivery" Value="2" asp:ListItem
asp:DropDownList
Note :
Here what you need to do is whenever you know that the top 1 selected item in dropdownlist that you do n't want slide the textbox you have to write the following Code
$('.status_select').live("change", function () {
var this_val = $(this).val();
if (this_val == '1') {
$('.tracker_box').show('slow');
return false;
}
if (this_val == '2') {
$('.tracker_box').show('slow');
}
else {
$('.tracker_box').hide('slow');
}
});
you have to write return false when your first Textbox slides visible .
Attachments
Follow