ebad.masood 0 Newbie Poster

In my form I am using a AjaxToolkit ModalPopupExtender. The PopupControlId has been set to a panel which has a RadioButtonList and a dropdownlist.The panel which pops up is something like this:

<asp:Panel ID="PopUpWindowPanel" runat="server" Visible="false" BorderStyle="Solid">
                <table cellpadding="2" cellspacing="0" width="100%" border="0" class="dataTbl">
                    <tr>
                        <td class="left">
                            <asp:RadioButtonList ID="RdBtnLstSortOptions" runat="server"  onclientclick="pageLoad();">
                                <asp:ListItem Text="No change." Selected="True"
                                    Value="None"></asp:ListItem>
                                <asp:ListItem Text="Some Change."
                                    Value="Existing"></asp:ListItem>
                            </asp:RadioButtonList>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">
                            <asp:Label ID="lblList" runat="server">List:</asp:Label>&nbsp;
                            <asp:DropDownList ID="ddlList" runat="server" Visible="false">
                            </asp:DropDownList>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="3">
                            <div class="divBtn">
                                <asp:LinkButton ID="btnDone" class="button" runat="server" OnClick="btnDone_Click">OK</asp:LinkButton>&nbsp;
                                <asp:LinkButton ID="btnCloseProfile" class="button" runat="server">Cancel</asp:LinkButton>
                            </div>
                        </td>
                    </tr>
                </table>
            </asp:Panel>

Now, What I want is that when user selects the Listitem with Text="Some Change." and Value="Existing", then and only then will dropdownlist with id="ddlList" must show, otherwise it must be hidden. I am populating this list on server-side at page load. AS this is ajaxcontrol i do not want any postbacks, therefore I am trying to handle this with javascript/jquery. I am a beginner with Javascript/Jquery so don't know how to do this properly. I have written some JQuery which is something like this:

function pageLoad() {

    $find('<%= RdBtnLstSortOptions.ClientID %>').add_selectedIndexChanged(
    function (sender, args) {
        var selectedValue = $(this).val();

        if ($.trim(selectedValue) == 'Existing') {

            // show the dropdown list ddlList
        }

        else { //show the hide the dropdown list ddlList }

    });
}

My question is how can I write this jquery/javascript properly so that I can show the dropdownlist upon the selected radio button option. Thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.