Показать конкретный dropdownList, основанный на выбранном VALUE, из другого dropdownList

Question

У меня есть 3 dropdownlists и каждый в своем собственном DIV.

дивы называют fromCity, WithinStateLimits и OutOfState.

То, что я пытаюсь выполнить с помощью сценария jQuery ниже, заключается в том, что если пользователь выбирает из dropdownList внутри fromCity DIV, скройте два других DIV.

Если пользователь выбирает из выпадающего списка внутри InStateLimits DIV, то два других DIVs должны быть скрыты.

Если пользователь выбирает из выпадающего списка внутри OutOfState DIV, то остальные два 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> 

Answer 1

Хорошо, я нашел решение, и вот оно. Надеюсь, это поможет кому-то другому.

Я использовал комбинацию CSS и JQuery, чтобы скрыть или показать divs в зависимости от выбора пользователя из dropdownList tripTyype.

Так, чтобы только fromCity DIV отображается на странице загрузки, я просто поставил следующее на двух DIVs я хотел бы скрыть на странице загрузки:

стиль = «дисплей: нет;»

Вот полный код:

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