JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<form id="formulario">
    
</form>

JavaScript

var lista_pueblos=[{"id":"2","nombre":"Madrid"},{"id":"4","nombre":"Barcelona"},{"id":"5","nombre":"Heidelberg"},{"id":"6","nombre":"Dusseldorf"},{"id":"7","nombre":"Paris"},{"id":"10","nombre":"Amsterdam"},{"id":"12","nombre":"Leeds"},{"id":"13","nombre":"Zaragoza"},{"id":"14","nombre":"Lugo"},{"id":"15","nombre":"Burdeos"},{"id":"17","nombre":"Zurich"},{"id":"18","nombre":"Frankfurt"},{"id":"25","nombre":"Pamplona"},{"id":"47","nombre":"Viana"},{"id":"5","nombre":"Heidelberg"},{"id":"6","nombre":"Dusseldorf"},{"id":"7","nombre":"Paris"},{"id":"10","nombre":"Amsterdam"},{"id":"12","nombre":"Leeds"},{"id":"13","nombre":"Zaragoza"},{"id":"14","nombre":"Lugo"},{"id":"15","nombre":"Burdeos"},{"id":"17","nombre":"Zurich"},{"id":"18","nombre":"Frankfurt"},{"id":"25","nombre":"Pamplona"}];

var dropdown='<select id="localidad_origen_1" name="localidad_origen_1" class="form-control selectpicker input-sm localidad_origen" data-live-search="true" required><option value="" selected disabled>Seleccione localidad</option></select>';

$("#formulario").after(dropdown);
    
    
rellenaPueblos($("#localidad_origen_1"), -1);
$('.selectpicker').selectpicker();
$('.selectpicker').selectpicker('refresh');



$("body").on('change',".localidad_origen, .localidad_destino", function(){
    alert("Meeept");   
   });


function rellenaPueblos(dd, pueblo_anterior) {
		var cadena="";
		var elProximoEsElBueno=false;
		for (var i = 0; i < lista_pueblos.length; i++) {
			if (elProximoEsElBueno == true) {
				cadena += "<option SELECTED value='" + lista_pueblos[i]["id"] + "'>" + lista_pueblos[i]["nombre"] + "</option>\n";
				elProximoEsElBueno = false;
				}
			else {
				cadena += "<option value='" + lista_pueblos[i]["id"] + "'>" + lista_pueblos[i]["nombre"] + "</option>\n";
				}
			if (lista_pueblos[i]["id"] == pueblo_anterior) {
				elProximoEsElBueno=true;
				}
			}
        //alert(dd.name);
		dd.append(cadena);
		}