JSFiddle - React, Tailwind, and code Playground

by Leon Alvarez Del Canto

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<label for="makes">Marcas:</label>
<select id="makes" class="form-control select2" name="makes"><option selected="selected" value="">Seleccione una marca</option><option value="1">ALFA ROMEO</option><option value="2">AUDI</option><option value="3">BENTLEY</option><option value="4">BMW</option><option value="5">CITROEN</option></select>
<label for="models">Modelos:</label>
<select id="models" class="form-control select2" name="models" style="width: 150px"></select>

<p id="demo"></p>

JavaScript

var textAlfa = '[{"id":3,"name":"147"},{"id":4,"name":"156"},{"id":5,"name":"166"},{"id":6,"name":"GT"},{"id":9,"name":"GTV"},{"id":10,"name":"Spider"}]';
JSON.parse(texAlfa);
var textAudi = '[{"id":11,"name":"A2"},{"id":12,"name":"A3"},{"id":13,"name":"A4"},{"id":14,"name":"A5"},{"id":15,"name":"A6"},{"id":16,"name":"A7"},{"id":19,"name":"A8"},{"id":20,"name":"Q3"},{"id":21,"name":"Q5"},{"id":22,"name":"Q7"}]'; 
JSON.parse(textAudi);
$('#makes').select2();  
    
$('#models').select2(); 
    
$("#makes").change(event => {
	$.get(`http://gps-amstaff1.c9users.io/make/${event.target.value}`, function(res, sta){
		$("#models").empty();
		res.forEach(element => {
		    $('#models').append($('<option>', {value: element.id, text: element.name})); 
		});
	});
});
 
JSON.parse(texAlfa);