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