1

tengo este código dentro de un modal de boostrap que genera un dropdown con 2 items, lo que no consigo hacer es que al seleccionar uno de ellos se quede marcado en el dropdown.

Tengo este código

    <div class="form-group row">
    <div class="col-sm-12">
        <div>
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Desde plantilla
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                <button class="dropdown-item" type="button">Coches</button>
                <button class="dropdown-item" type="button">Motos</button>
            </div>

        </div>
    </div>
</div>

Me genera esto por pantalla

introducir la descripción de la imagen aquí

He intentado capturar el evento de esta forma, sin éxito

    $("#dropdownMenu2").on('click', 'li a', function(){
        alert('entro opción 1');
    });

    $(document).on('click', '#dropdownMenu2','li a', function(event) {
        alert('entro opción 2');
    });

Gracias

4
  • A qué te refieres con marcado?, Que quede como texto visible del dropdown?
    – BetaM
    el 27 sep. 2020 a las 17:00
  • Exacto que si selecciono Motos se quede marcado al hacer click
    – ilernet
    el 27 sep. 2020 a las 17:13
  • Ok, ¿nos compartes que has intentado?, esto parece trabajarse con JS
    – BetaM
    el 27 sep. 2020 a las 17:14
  • Edito el primer post, gracias @BetaM
    – ilernet
    el 27 sep. 2020 a las 17:59

1 respuesta 1

1

El dropdown de bootstrap no es un reemplazo de un select. Es más bien como para seguir ligas. Si es verdad que puedes añadirle con CSS el que se vea COMO un Select, pero no es lo mismo.

Lo primero que te recomendaría, es usar un select con la clase form-control es bastante agradable a la vista.

Ahora, si forzosamente quieres que se cambie el texto de Desde la plantilla por motos, por ejemplo, como te han dicho arriba, es un caso para Javascript

Esta es una solución super sucia para la opción de las motos, pero te da la idea:

<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button" >Coches</button>
    <button class="dropdown-item" 
        type="button"
        onclick="document.getElementById('dropdownMenu2').innerHTML = 'Motos'">
        Motos
    </button>
</div>

Aunque insisto, lo más limpio sería usar un <select class="form-control">.

Tu Respuesta

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

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