AngularJS Example:

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="test">
    <div ng-controller="TestController">
        <div>Country:
            <select ng-model="country" ng-options="country.name as country.name for country in countries" ng-change="getStates()">
                <option value=''>Select</option>
            </select>
        </div>
        <div>States:
            <select id="state" ng-disabled="!country" ng-model="state" ng-options="state.name as state.name for state in states" ng-change="getCity()">
                <option value=''>Select</option>
            </select>
        </div>
        <div>City:
            <select id="city" ng-disabled="!country || !state" ng-model="city" ng-options="city.name as city.name for city in cities" ng-change="alertCity()">
                <option value=''>Select</option>
            </select>
        </div>
    </div>
</div>

CSS

.done-true {
    text-decoration: line-through;
    color: grey;
}

JavaScript

angular.module('test', [])
    .controller('TestController', ['$scope', '$filter',

function ($scope, $filter) {
    $scope.country = "India";
    $scope.state = "Rajasthan";
    $scope.city = "Ajmer";

    $scope.countries = [{
        "name": "India",
            "states": [{
            "name": "Maharashtra",
                "cities": [{
                "name": "Pune"
            }, {
                "name": "Mumbai"
            }, {
                "name": "Nagpur"
            }, {
                "name": "Akola"
            }]
        }, {
            "name": "Madhya Pradesh",
                "cities": [{
                "name": "Indore"
            }, {
                "name": "Bhopal"
            }, {
                "name": "Jabalpur"
            }]
        }, {
            "name": "Rajasthan",
                "cities": [{
                "name": "Jaipur"
            }, {
                "name": "Ajmer"
            }, {
                "name": "Jodhpur"
            }]
        }]
    }, {
        "name": "USA",
            "states": [{
            "name": "Alabama",
                "cities": [{
                "name": "Montgomery"
            }, {
                "name": "Birmingham"
            }]
        }, {
            "name": "California",
                "cities": [{
                "name": "Sacramento"
            }, {
                "name": "Fremont"
            }]
        }, {
            "name": "Illinois",
                "cities": [{
                "name": "Springfield"
            }, {
                "name": "Chicago"
            }]
        }]
    }, {
        "name": "Australia",
            "states": [{
            "name": "NewSouthWales",
                "cities": [{
                "name": "Sydney"
            }]
        }, {
            "name": "Victoria",
                "cities": [{
                "name": "Melbourne"
            }]
        }]
    }];

    $scope.getStates = function () {
        $scope.states = null;
       ...