Estoy usando el siguiente select2 y bootstrap 4:
<div class="row">
<div class="col-md-12">
<div class="card border-primary mb-3" >
<div class="card-header">Header</div>
<div class="card-body">
<select class="form-select" id="cmbSaldosContrarios">
</select>
</div>
</div>
</div>
</div>
Este es el código javascript que lo llena:
function llenarCombo(id,ruta,datos){
$.ajax({
url: ruta,
type: "GET",
data: datos
}).done(function (respuesta, textStatus, jqXHR){
cargaDatos=$.map(respuesta, function(obj){
return { id: obj.data, text: obj.label}
});
$("#"+id).find("option:gt(0)").remove();
$("#"+id).select2({
placeholder: "-Seleccione una opción-",
data:cargaDatos
});
}).fail(function (jqXHR, textStatus, errorThrown){
console.log("error\njqXHR=" + jqXHR + "\nstatus=" + textStatus + "\nerror=" + errorThrown);
console.log(jqXHR );
}).always(function (dataORjqXHR, textStatus, jqXHR_ORerrorThrown){
//alert( "complete" );
});
}
llenarCombo("cmbSaldosContrarios","${req.contextPath}/SaldosContrarios",[]);
El combo se llena perfectamente, pero el problema es que aparece una etiqueta al lado del combo con el texto que selecciono. Dicha etiqueta no quiero que aparezca ¿Como puedo quitarla?