There are three dropdown lists, each enclosed in its own DIV container.
The DIV containers are named fromCity, WithinStateLimits, and OutOfState.
The goal is to use the jQuery script below to hide the other two DIVs when a user selects an option from the dropdown list inside the fromCity DIV.
If a user selects an option from the dropdown list inside the WithinStateLimits DIV, the other two DIVs should be hidden.
Similarly, if a user selects an option from the dropdown list inside the OutOfState DIV, the other two DIVs should be hidden.
Upon page load, only the dropdown list inside the fromCity DIV should be visible by default.
Any suggestions on how to achieve this functionality?
Thank you in advance.
Re: How do I show different options based on the selected value from a dropdown list?
Just now|LINK
Thank you very much A2H,
As I am more familiar with jQuery, I attempted the code below, but it doesn't seem to work.
<script type="text/javascript">
$('#tripType').change(function () {
var SelectedValue = $('#<%= tripType.ClientID %> option:selected').val();
if ((SelectedValue == 'one_way_to_airport') | (SelectedValue == 'one_way_from_airport') | (SelectedValue == 'round_trip_airport') | (SelectedValue == 'One-way trip NOT involving Airport') | (SelectedValue == 'Round trip NOT involving Airport')) {
$('#fromCity').fadeIn();
$('#WithinStateLimits').fadeOut();
$('#OutOfState').fadeOut();
}
else if (value == 'hourly') {
// Show or hide
$('#fromCity').fadeOut();
$('#OutOfState').fadeOut();
$('#WithinStateLimits').fadeIn();
}
else { // value == 'Long_Distance'
$('#fromCity').fadeOut();
$('#WithinStateLimits').fadeOut();
$('#OutOfState').fadeIn();
}
});
</script>
<asp:DropdownList ID="tripType" runat="server" class="select ">
<asp:ListItem value="">--Select One--</asp:ListItem>
<asp:ListItem value="one_way_to_airport">One-way trip TO Airport</asp:ListItem>
<asp:ListItem value="one_way_from_airport">One-way trip FROM Airport</asp:ListItem>
<asp:ListItem value="round_trip_airport">Round trip involving Airport</asp:ListItem>
<asp:ListItem value="one_way_no_airport">One-way trip NOT involving Airport</asp:ListItem>
<asp:ListItem value="round_trip_no_airport">Round trip NOT involving Airport</asp:ListItem>
<asp:ListItem value="hourly">Hourly/Charter</asp:ListItem>
<asp:ListItem value="Long_Distance">Long Distance</asp:ListItem>
</asp:DropdownList>