Populate cascading dropdown using JSON and jQuery…!


I got a requirement to populate two dropdowns with Country and Province/State data for a SharePoint 2007 project (data retrieved from SharePoint lists). So the first dropdown will contain the Country names. Second dropdown should populate details depending on the selected country on first dropdown. In my scenario, if the country is USA then populate the states from USA, and if its Canada, populate the provinces from Canada, if any other country keep the dropdown disabled.

I simple added two asp dropdown controls and bound data respectively of the first dropdown selected index change event. But the issue was for better user experience we had to avoid that post back.

Was reading about how to implement this and because of the reason, possible data for the province/state dropdown is small I went for a jQuery + JSON solution. I could have used a update panel and provided a Ajax solution. But with SharePoint 2007 integrating Ajax is a bit messy and also only because of dropdown data loading for it was a overhead doing that. Continue reading

Advertisements