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>

JavaScript

$('#makes').select2();  
    
 $('#models').select2(); 
    
$("#makes").change(event => {
	$.get(`/make/${event.target.value}`, function(res, sta){
		$("#models").empty();
		res.forEach(element => {
		    $('#models').append($('<option>', {value: element.id, text: element.name})); 
		});
	});
});
 
$('#models').prop('selectedIndex', 4);