0

Quisiera saber como puedo modificar el estilo de una opcion especifica en un select.

Mi select trae unos registros de la BD y de forma manual le agrego una opcion que sea añadir nuevo campo, y este abre una modal, pero quisiera que esa opcion se vea en negrilla, las demas que tengan el diseño por defecto.

Este es mi select

<select id="autore_id" name="autore_id" class="form-select block w-full mt-1 rounded border-gray-300 select2"></select>

Aqui lo vinculo con select2

$(".select2").select2({theme: "bootstrap-5"});

Aqui esta llenando el select mediante ajax.

$.ajax({
...
$('#autore_id').append(`<option value="${element.autores[i].id}">${element.autores[i].nombre</option>`);

Aqui le ingreso un campo de insertar nuevo registro.

$('#autore_id').append(`<option value="1000" class="font-weight-bold">Agregar autor</option>`);

Se que se puede colocar negrilla pero no encuentro como a una sola opción

0

2 respuestas 2

0

Puedes agregar simplemente la etiqueta <b> dentro del option, de la siguiente forma

$('#autore_id').append(`<option value="1000">
 <b>Agregar autor</b>
</option>`);
2
  • He probado esta forma con anterioridad y no me funciona, me imprime el texto pero la negrita no.
    – kevinrueda
    Commented el 30 ago. 2021 a las 22:45
  • tambien puede que esto te sirva: $('#autore_id').append(<option value="1000" style="font-weight: 700;"> Agregar autor </option>);
    – HAKU
    Commented el 31 ago. 2021 a las 16:35
0

Si entendi lo que quieres hacer ¿seria algo como esto?

var autores = [];
function getAuthors(){
    for(var i=0; i<5; i++){
    autores.push({id: i+1, text: "Nombre " + (i+1)});
  }
}

$("#loadData").click(function(){
    getAuthors();
  
    for(var i=0; i<autores.length; i++){
    console.log(autores[i]);
        $('#autore_id').append('<option value=' + autores[i].id + '>' + autores[i].text + '</option>');
  }
  
  $("#autore_id").select2().trigger('change');

    $('#autore_id').append('<option class="negrita" value=1000>Agregar autor</option>');
})
.form-select{
  width: 300px;
}

.negrita {
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">
<button id="loadData">
Cargar datos
</button>
<select id="autore_id" name="autore_id" class="form-select block w-full mt-1 rounded border-gray-300 select2">

</select>

introducir la descripción de la imagen aquí

10
  • No me funciona, me podrias indicar que funcion tiene trigger en este caso me esta borrando todos los elementos del select. Gracias
    – kevinrueda
    Commented el 30 ago. 2021 a las 22:44
  • Este ejemplo es solo javascript puro, tal vez estan limpiando el select2 en alguno momento o te falta llamar .trigger('change'); despues de agregarle nuevos datos Commented el 30 ago. 2021 a las 23:54
  • Puedes validar si en algun punto estas sobrescribiendo el select2 a eso suena o refrescando algo, porque por poner un append no deberia "borrarte todos los elementos", en alguna parte del codigo estas volviendo a limpiar el combo. Commented el 4 sept. 2021 a las 10:42
  • Lo que está ocasionado el error es el triggers, aún no puedo solucionarlo pero se que proviene de ahí, porque cuando coloca la opción de agregar autor sin negrilla lo toma bien pero cuando trato de hacer el trigger y aplicar la negrilla el select pierde el formato.
    – kevinrueda
    Commented el 5 sept. 2021 a las 1:01
  • Vuelvele a dar formato despues del trigger: .select2(); <-- asi nadamas Commented el 6 sept. 2021 a las 0:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.