CarMakeModelDB Example

Example dropdown for CarMakeModelDB API.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-12">
  <h4>Drop Down Example</h4>
  <p>The example below shows how easy it is to add year, make, model, and trim select boxes to your website and/or application.</p>
  <p>Checkout: <a href="http://carmakemodeldb.com" target="_blank">CarMakeModelDB.com</a> for more information about our vehicle data API.</p>
  <form>
    <div class="form-group">
      <select id="vehicle_year" name="vehicle_year" class="form-control"></select>
    </div>
    <div class="form-group">
      <select id="vehicle_make" name="vehicle_make" class="form-control"></select>
    </div>
    <div class="form-group">
      <select id="vehicle_model" name="vehicle_model" class="form-control"></select>
    </div>
    <div class="form-group">
      <select id="vehicle_trim" name="vehicle_trim" class="form-control"></select>
    </div>
  </form>
  <div class="well" id="vehicleInfo"></div>
</div>
<div id="loading" class="modal" aria-hidden="true" role="dialog" tabindex="-1"></div>

CSS

.modal {
  z-index: 9001;
}

.select2 {
  z-index: 1;
}

#loading {
  display: none;
  background: rgba( 255, 255, 255, .8) url('https://i.imgur.com/uYY3mVm.gif') 50% 50% no-repeat;
  opacity: 0.80;
  -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80)
}

;
}

JavaScript

$(document).ready(function() {
		  // Add your API key below to test this code
		  var apiToken = '';

		  // Get all years and update vehicle_year select box
		  $.get("https://carmakemodeldb.com/api/v1/car-lists/get/years" + "?api_token=" + apiToken,
		    function(data) {
		      var year = $('#vehicle_year');
		      year.empty();
		      year.append("<option value=''>Select Year</option>");
		      $.each(data, function(index, element) {
		        year.append("<option value='" + element.year + "'>" + element.year + "</option>");
		      });
		    }
		  );

		  // Get makes based on vehicle_year selected
		  // Updated vehicleInfo div after year is selected
		  $('#vehicle_year').change(function() {
		    $.get("https://carmakemodeldb.com/api/v1/car-lists/get/makes" + "/" + $(this).val() + "?api_token=" + apiToken,
		      function(data) {
		        var make = $('#vehicle_make');
		        make.empty();
		        make.append("<option value=''>Select Make</option>");
		        $.each(data, function(index, element) {
		          make.append("<option value='" + element.make + "'>" + element.make + "</option>");
		        });
		      }
		    );
		    $('#vehicleInfo').html('Year: <strong>' + $('#vehicle_year').val() + '</strong>');
		  });

		  // Get models based on vehicle_year and vehicle_make selection
		  // Updated vehicleInfo div after make is selected
		  $('#vehicle_make').change(function() {
		    var vehYear = $('#vehicle_year').val();
		    $.get("https://carmakemodeldb.com/api/v1/car-lists/get/models" + "/" + vehYear + "/" + $(this).val() + "?api_token=" + apiToken,
		      function(data) {
		        var model = $('#vehicle_model');
		        model.empty();
		        model.append("<option value=''>Select Model</option>");
		        $.each(data, function(index, element) {
		          model.append("<option value='" + element.model + "'>" + element.model + "</option>");
		        });
		      }
		    );
		    $('#vehicleInfo').html('Year: <strong>' +...