根据从另一个dropdownList中选择的VALUE显示特定的dropdownList

Question

我有3个下拉列表，每个都有自己的DIV。

DIV称为fromCity ， InsideStateLimits和OutOfState 。

我想用下面的jQuery脚本完成的是，如果用户从fromCity DIV中的dropdownList中进行选择，请隐藏其他两个DIV。

如果用户从InsideStateLimits DIV内的dropdownList中选择，则其他两个DIV应该被隐藏。

如果用户从OutOfState DIV内的dropdownList中选择，则其他两个DIV需要隐藏。

最后，默认情况下，页面加载时仅fromCity DIV中的下拉列表应该可见。

任何想法如何使这项工作？

在此先感谢

回复：如何根据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>

Answer 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>