JSFiddle - React, Tailwind, and code Playground

by Leon Alvarez Del Canto

HTML

<script src="cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
<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">Tipo:</label>
<select id="models" class="form-control select2" name="models">
<option selected="selected" value="">Seleccione un modelo</option>
</select>

JavaScript

$('#makes').select2({
        placeholder: "Seleccione una marca",
        tags: true,
        tokenSeparators: [",", " "],
        createTag: function(newTag) {
            if (newTag.term) {
                return {
                    id: 'new:' + newTag.term,
                    text: newTag.term + ' (new)'
                }
            }
        }
    });  
    
 $('#models').select2({
        placeholder: "Seleccione un modelo",
        tags: true,
        tokenSeparators: [",", " "],
        createTag: function(newTag) {
            if (newTag.term) {
                return {
                    id: 'new:' + newTag.term,
                    text: newTag.term + ' (new)'
                }
            }
        }
    }); 
    
$("#makes").change(event => {
	$.get(`https://gps-amstaff1.c9users.io/make/${event.target.value}`, function(res, sta){
		$("#models").empty();
		res.forEach(element => {
			$("#models").append(`<option value=${element.id}> ${element.name} </option>`);
		});
	});
});