Styling ajax cascading dropdown how please?

Question

User2108892867 posted

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.