Tabela FIPE

by gsguma

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<header class="navbar navbar-default hidden-print">
			<div class="container"> 
				<a href="#" class="navbar-brand">Tabela FIPE</a>
			</div>
		</header>
		<div class="container">
			<form>
				<div class="form-group">
					<label for="marca" class="hidden-print">Marca</label>
					<select class="form-control hidden-print" id="marca" disabled="disabled">
						<option value="">-- Escolha --</option>
					</select>
				</div>
				
				<div class="form-group">			
					<label for="modelo" class="hidden-print">Modelo</label>
					<select class="form-control hidden-print" id="modelo" disabled="disabled">
						<option value="">-- Escolha --</option>
					</select>
				</div>
				
				<div class="form-group">							
					<label for="ano" class="hidden-print">Ano</label>
					<select class="form-control hidden-print" id="ano" disabled="disabled">
						<option value="">-- Escolha --</option>
					</select>
				</div>
					
				<div class="form-group">
					<button type="button"  id="consultar" class="btn btn-primary hidden-print" data-loading-text="Aguarde...">Consultar</button>
				</div>
			</form>
			
			<div id="resultado">
				<div class="panel panel-primary">
					<div class="panel-heading">
						Dados da tabela FIPE 
						<button id="cancelar" type="button" class="close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="panel-body">
						<dl class="dl-horizontal"></dl>
					</div>
				</div>
			</div>
		</div>

CSS

#resultado {
	margin-top: 40px;
}

JavaScript

var html;

$(function() {
	var $optMarca	         = $("#marca");
	var $optModelo	         = $("#modelo");
	var $optAno 	         = $("#ano");
	var $btnConsultar        = $("#consultar");
	var $divResultado        = $("#resultado");
	var apiLink		  		 = "https://fipeapi.appspot.com/api/1";
	var $btnCancelarConsulta = $("#cancelar");
	
	$divResultado.hide();
	$btnConsultar.attr('disabled', 'disabled');
	
    $.ajax({ 
		url: apiLink + "/carros/marcas.json" 
	}).always(function(data) {
		$.each(data, function(key, value) {
			$optMarca.append("<option value='" +value.id+ "'>" +value.name+ "</option>");
		});
    }).done(function() {
		$optMarca.removeAttr('disabled');
	});
	
	$optMarca.on("change", function() {
		var html = "\n\t<option value=''>-- Escolha --</option>"
		
		$optAno.html(html).attr('disabled', 'disabled');
		$divResultado.hide();
		
		if (this.value != "") {
			$.ajax({ 
				cache : false,
				url: apiLink+ "/carros/veiculos/"+ this.value +".json" 
			}).always(function(data) {
				$.each(data, function(key, value) {
					html = html + "\n\t<option value='" +value.id+ "'>" +value.name+ "</option>";
				});				
			}).done(function() {
				$optModelo.html(html);
				$optModelo.html(html).removeAttr('disabled');
			});
		} else {
			$optModelo.html(html).attr('disabled', 'disabled');
		}
	});
	
	$optModelo.on("change", function() {
		var html = "<option value=''>-- Escolha --</option>"
		
		$divResultado.hide();
		
		if (this.value != "") {		
			$.ajax({
				cache : false,
				url: apiLink+ "/carros/veiculo/" +$optMarca.val()+ "/" + this.value +".json" 
			}).always(function(data) {
				
				$.each(data, function(key, value) {
					html = html + "<option value='" +value.id+ "'>" +value.name+ "</option>";				
				});				
			}).complete(function() {
				$optAno.html(html);
				$optAno.html(html).removeAttr('disabled');
			});
		} else {
			$optAno.html(html).attr('disabled', 'disabled');
		}
	});
	
	$optAno.on("change", function()...