Styling ajax cascading dropdown how please? [Answered]RSS

• • Reply
  asplearning

  Member

  421 Points

  1796 Posts

  Styling ajax cascading dropdown how please?

  Apr 06, 2015 06:47 PM|asplearning|LINK

  Hello everyone, I would love to add background color to ajax cascading dropdown list when the parent control is selected. Here is my mark up:

  <div>
      <asp:DropDownList ID="ddlTest" runat="server">
          <asp:ListItem>Test1</asp:ListItem>
          <asp:ListItem>Test2</asp:ListItem>
      </asp:DropDownList>
  </div>
  
  <div class="row margin10">
      <div>
          <cc1:MyDropdownList ID="ddlCountry" runat="server" DataTextField="country_name" DataValueField="country_id" ValidationGroup="product"></cc1:MyDropdownList>
          <ajaxToolkit:CascadingDropDown ID="cdlCountry" TargetControlID="ddlCountry" PromptText="-- Select country --"
                          PromptValue="0" ServicePath="~/service/CascadingDdl.asmx" ServiceMethod="GetCountry" runat="server"
                          Category="country_id" LoadingText="Loading..." />
      </div>
      <div>
          <cc1:MyDropdownList ID="ddlState" runat="server" ValidationGroup="product" DataTextField="state_name" DataValueField="state_id"></cc1:MyDropdownList>
          <ajaxToolkit:CascadingDropDown ID="cdlState" TargetControlID="ddlState" PromptText="-- Select state --"
          PromptValue="0" ServicePath="~/service/CascadingDdl.asmx" ServiceMethod="GetState" runat="server"
          Category="country_id" ParentControlID="ddlCountry" LoadingText="Loading..." />
      </div>
  </div>

  So I want to add background color to the ddlState when ddlCountry is selected. Here is my javascript to add the style:

               $("select[id*=ddlCountry]").change(function () {
                  
                   $("select[id*=ddlState]").each(function () {
                       $(this).children('option').css("background-color", "red");
                   });
                
               });

  But this doesn't work. I tested my js code to this:

               $("select[id*=ddlCountry]").change(function () {
                  
                   $("select[id*=ddlTest]").each(function () {
                       $(this).children('option').css("background-color", "red");
                   });
                  
               });

  Then this will work. But I need to populate the child dropdown list dynamically. Anyone knows how I can fix this?

  Thanks. 

• • Reply
  Fei Han - MS...

  All-Star

  39375 Points

  5787 Posts

  Microsoft

  Re: Styling ajax cascading dropdown how please?

  Apr 07, 2015 03:33 AM|Fei Han - MSFT|LINK

  Hi,

  Thanks for your post.

  Please try the following code to change background-color of “ddlState” options.

  $(function () {
      $("select[id*=ddlCountry]").change(function () {
          $("select[id*=ddlState]").children("option").each(function () {
              $(this).css("background-color", "red");
          });
      })
  }) 
  

  Best Regards,

  Fei Han

  
  MSDN Community Support
  Please remember to "Mark as Answer" the responses that resolved your issue.