我有3个下拉列表,每个都在自己的DIV中。
DIV被称为 fromCity , WithinStateLimits 和 OutOfState 。
我想用下面的jQuery脚本完成的是,如果用户从 fromCity DIV中的dropdownList中选择,则隐藏其他两个DIV。
如果用户从 WithinStateLimits DIV中的dropdownList中选择,则应隐藏其他两个DIV。
如果用户从 OutOfState DIV中的dropdownList中选择,则需要隐藏其他两个DIV。
最后,默认情况下,只有 fromCity DIV中的下拉列表才能在页面加载时显示。
任何想法如何使这项工作?
非常感谢
Re:如何根据dropdownList中的选定值显示不同的选项?
几秒钟前| LINK
非常感谢A2H,
由于我对jQuery感觉更舒服,我尝试了以下代码,但它不起作用。
<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>
答案 0 :(得分:1)
好的,我找到了解决方案,就在这里。我希望它可以帮助别人。
我使用CSS和JQuery的组合隐藏或显示div,具体取决于用户从tripTyype dropdownList中的选择。
因此,请确保在页面加载时仅显示fromCity div,我只需将以下内容放在我想要在页面加载时隐藏的两个DIV上:
风格= “显示:无;”
这是完整的代码:
//js
function ShowHideDiv() {
//Get dropdown selected value
var SelectedValue = $('#<%= tripType.ClientID %> option:selected').val();
// check selected value.
if ((SelectedValue == 'one_way_to_airport') || (SelectedValue == 'one_way_from_airport') || (SelectedValue == 'round_trip_airport') || (SelectedValue == 'one_way_no_airport') || (SelectedValue == 'round_trip_no_airport')) {
//If fromCity is selected then show from city div and hide other Divs
$('#fromCity').css("display", "block");
$('#WithinStateLimits').css("display", "none");
$('#OutOfState').css("display", "none");
}
else if (SelectedValue == 'hourly') {
//If hour is selected then show hourly div and hide other Divs
$('#fromCity').css("display", "none");
$('#WithinStateLimits').css("display", "block");
$('#OutOfState').css("display", "none");
}
else {
//If out of state is selected then show the out of state Div and hide the others.
$('#fromCity').css("display", "none");
$('#WithinStateLimits').css("display", "none");
$('#OutOfState').css("display", "block");
}
}
</script>
//markup:
<table>
<tr>
<td>
<label for="tripType">Trip Type <abbr class="required" title="required">*</abbr></label>
<asp:DropdownList ID="tripType" runat="server" class="select " onchange="ShowHideDiv();">
<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>
</td>
<td>
<div id="fromCity">
<label for="from_city_and_state">Pick off from <abbr class="required" title="required">*</abbr></label>
<asp:DropDownList ID="from_city_and_state" runat="server" class="select " >
<asp:ListItem value="">--Select One--</asp:ListItem>
</asp:DropDownList>
</div>
<div id="WithinStateLimits" style="display:none;" runat="server">
<label for="HourlyCharter">Hourly <abbr class="required" title="required">*</abbr></label>
<asp:DropDownList ID="HourlyCharter" runat="server" class="select ">
<asp:ListItem value="3">3 Hours</asp:ListItem>
<asp:ListItem value="4">4 Hours</asp:ListItem>
<asp:ListItem value="5">5 Hours</asp:ListItem>
<asp:ListItem value="6">6 Hours</asp:ListItem>
<asp:ListItem value="7">7 Hours</asp:ListItem>
</asp:DropDownList>
</div>
<div id="OutOfState" style="display:none;">
<label for="LongDistance">Long Distance <abbr class="required" title="required">*</abbr></label>
<asp:DropDownList ID="LongDistance" runat="server" class="select ">
<asp:ListItem value="2">$2 per mile</asp:ListItem>
<asp:ListItem value="4">$4 per mile</asp:ListItem>
</asp:DropDownList>
</div>
</td>
</tr>
</table>