<!-- app/views/yourfile.blade.php -->
...
<form id="lorem">
	<!-- Dropdown for countries -->
	<select name="country" id="country">
		<option value="1">India</option>
		<option value="2">China</option>
		<option value="3">Japan</option>
	</select>

	<!-- Dropdown for country > area. Default : empty + disabled -->
	<select name="area" id="area" disabled="disabled"> 
		<option value=""></option>
	</select>

</form>

...

<script type="text/javascript">
	var form  = $('form#lorem'),
		// Using .find() is faster.
		ddCountry = form.find('select#country'),
		ddArea    = form.find('select#area');


	ddCountry.change(function () {
		var apiEndpoint   = 'http://www.example.com/api/areaByCountry/' + ddCountry.val();

		$.getJSON(apiEndpoint, {ajax: 'true'}, function(data){
        
	        var options = '';
	        
	        // Building the html from the data received.
	        for (var i = 0; i < data.length; i++) {
	            options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
	        }
	    
	        // Populating the dropdown with options. 
	        ddArea.find(".ctlItem").html(options);

	        // Enabling the dropdown.
	        ddArea.removeProp('disabled');
		})
	});
</script>

<!-- app/routes.php -->

<?php 

// Just a trivial example. You would probably use controllers 
// and repositories to accomplish this.
Route::get('api/areaByCountry/{id}', function ($id)
{
	return Country::find($id)->areas()->lists('name', 'id');
});

?>