taT4JS | Handle Select Menu Inter-Dependencies

Recently, while prototyping intranet website I came across scenario, wherein the top section of the web page is required to have two drop-down lists, i.e. select tags, which would have inter-dependency.

Let say, the web page is divided into 3 sections;

  • #top, having drop-down lists,
  • #middle, which will reload asynchronously based on the context set by drop-down lists,
  • #bottom, like page footer.

The first drop-down list is populated with names of programming languages and second drop-down list is populated with list of categories like Tutorials, Tips and Tricks, FAQs, etc.

Playing Tricks

$('#selMenu_typeOne').change(function() {
$('#selMenu_typeTwo').change(function() { 
        //execute some function, or 
        //do some global variable assignment operations

As per the above snippet, as soon as user selects an item from #selMenu_typeOne drop-down list, it would automatically trigger the similar event for the #selMenu_typeTwo drop-down list.

To implement the async functionality, I used $.getJSON() functions to read necessary information from JSON file, whose naming is dependent on the items selected from drop-down lists and format it into tables, lists, etc.

Tips to Remember

Let say, user selected Java from first list, which resets the second list to select Tutorials by default. This would, in turn cause #middle section to reload async accordingly. This enables user to change the selection in any of the drop-down lists to view data asynchronously with ease.