在下拉菜单的箭头/下拉菜单的延迟加载上点击加载下拉列表

I have a situation where on a page there are 7-8 dropdowns, which have large amount of data to be bound. I have a radiobutton list having 2 choices and on selecting any of them, the I get the data from cache and bind all the dropdowns which takes about 6-7 seconds. But, I don't use all the dropdown every time as basic functionality is based on a date range. So I was thinking , if I could load the dropdown on demand, i.e. on click of dropdown arrow, I would bind the dropdown, the it would be better and user does not have to wait for those 6-7 seconds while switching between the radiobuttonlist choices. I tried calling a JS function on dropdown's onClick and from there firing one button's event. I am getting the data populated on dropdown's click but, the dropdown gets collapsed as soon as the data is bound, and user have to click again to select from dropdownlist items.I was just wondering if anyone can give me an idea so that the dropdown wont collapse and stays after binding, or else a full idea of lazy loading of the dropdown. I have also specified some of my code from my POC.I have a situation where on a page there are 7-