JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<script src="http://www.carqueryapi.com/js/jquery.min.js"></script>
<script src="http://www.carqueryapi.com/js/carquery.0.3.4.js"></script>
<select name="car-years" id="car-years"></select>  
<select name="car-makes" id="car-makes"></select> 
<select name="car-models" id="car-models"></select>
<select name="car-model-trims" id="car-model-trims"></select>  

<input id="cq-show-data" type="button" value="Show Data" />
<div id="car-model-data"></div>


<table> 
   <tr> 
      <td valign="top"><div id="make-list" /></td> 
      <td valign="top"><div id="model-list" /></td> 
      <td valign="top"><div id="trim-list" /></td> 
   </tr> 
   <tr> 
       <td colspan="3"><div id="trim-data-list" /></td> 
   </tr> 
</table> 


<script type="text/javascript">
$(document).ready(
function()
{
     //Create a variable for the CarQuery object.  You can call it whatever you like.
     var carquery = new CarQuery();

     //Run the carquery init function to get things started:
     carquery.init();
     
     //Optionally, you can pre-select a vehicle by passing year / make / model / trim to the init function:
     //carquery.init('2000', 'dodge', 'Viper', 11636);

     //Optional: Pass sold_in_us:true to the setFilters method to show only US models. 
     carquery.setFilters( {sold_in_us:true} );

     //Optional: initialize the year, make, model, and trim drop downs by providing their element IDs
     carquery.initYearMakeModelTrim('car-years', 'car-makes', 'car-models', 'car-model-trims');

     //Optional: set the onclick event for a button to show car data.
     $('#cq-show-data').click(  function(){ carquery.populateCarData('car-model-data'); } );

     //Optional: initialize the make, model, trim lists by providing their element IDs.
     carquery.initMakeModelTrimList('make-list', 'model-list', 'trim-list', 'trim-data-list');

     //Optional: set minimum and/or maximum year options.
     carquery.year_select_min=1990;
     carquery.year_select_max=1999;
 
    ...