Best practise in JavaScript to handle cases where one control affects other controls and vice versa

I have a situation where on the same HTML page theye are three separated user controls, each has a list box in it for data selection. The case is that if a user selects a value in the first user control list box, it affects the data source of the other two user controls. And vice versa. And if the user selects a data in the other user controls , it must update the first user control that a change in data happened and it needs to do something.

I was thinking of using the Observer design pattern to implement this, and after a short Googling came up with various results , such as:

http://ift.tt/1BPSloX

http://ift.tt/1Q1QRQy

BUT, is this really the best practice ?