KnockoutJs

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically, KO can help you implement it more simply and maintainably.

Read here for more information on KnockoutJs.

Implementation:

Now in this post, assuming you have read about KO, I want to show you how you can populate a dropdown list from the server and change text when a value is selected.

Please take note, I did this using . Net MVC 3. Now, i have two ActionResult function that return a Json object. The "studentObj" is an anonymous object that has two properties, student and rankings. Student is the student object with a ranking of  "Average". The rankings, is a list of Ranking that can be awarded to a student.

This is how we are going to display the information on the client side:

These are the results, when page loads for the first time:

And when student is ranked:

I am sure you can agree that this is a cleaner way of changing text depending with the action or event. Try to do this the normal way you were used to doing it and compare, i am sure you will be amazed.