¿Cómo puedo mostrar algunos de los contenidos si los usuarios seleccionar una opción el uso de select/etiqueta de opción?
Estoy usando bootstrap y sé cómo colapso de contenido, pero yo estoy usando la casilla de verificación para este o botones, pero para esto yo no puedo hacer que funcione..

Alguien sabe cómo hacerlo?

  • Esto puede resolver su problema stackoverflow.com/questions/835259/…
  • Sí, estoy usando jquery para llamar .el colapso de la función a la clase ..
  • Excelente. Ver mi respuesta y dejar un comentario si más preguntas. Por favor, recuerde upvote todos los mensajes que son de gran ayuda para usted, y para seleccionar una respuesta correcta cuando se hace para cerrar el tema (puede hacer ambos, juntos, también).
  • Speedysnail6 resolver. Gracias a todos!
InformationsquelleAutor Luis Serrano | 2013-09-24

2 Comentarios

  1. 3

    Bootstrap está construido en la parte superior de jQuery, así que vamos a usar que:

    1. En primer lugar, se asigna un ID para el control select (mystuff)

      <select id="mystuff">
    2. Entonces, le decimos a jQuery ver por el valor de ese elemento a cambiar:

      $('#mystuff').change(function() {
    3. Siguiente, obtenemos el valor de ese elemento actualmente seleccionado:

      opt = $(this).val();
    4. A continuación, determinar que se haya seleccionado la opción

      if (opt=="opt1"){} //Nota que están poniendo a prueba el VALOR, no el texto, de la opción
    5. Finalmente, inyectar un poco de html en el DIV con id=msgbox

      $('#msgbox').html('some html code');

    Trabajo jsFiddle ejemplo

    HTML:

    <select id="mystuff">
       <option value="0">-- Choose One --</option>       
       <option value="opt1">House</option>
       <option value="opt2">Car</option>
       <option value="opt3">Bicycle</option>
    </select>
    
    <div id="msgbox"></div>

    javascript/jquery

    $('#mystuff').change(function() {
        opt = $(this).val();
        if (opt=="opt1") {
            $('#msgbox').html('<h2>My House</h2>I have a large house on a quiet street');
        }else if (opt == "opt2") {
            $('#msgbox').html('<h2>My Car</h2>I drive an Audi A200');
        }else if (opt == "opt3") {
            $('#msgbox').html('<h2>My Bicycle</h2>I do not need a bicycle, I have a car.');
        }
    });
    • Esto es exactamente lo que yo necesitaba. Estoy muy contenta de haber publicado un bootstrap ejemplo.
  2. 2

    puede utilizar el colapso de bootstrap:

    HTML:

    <select id="mystuff">
       <option value="0">-- Choose One --</option>       
       <option value="opt1">House</option>
       <option value="opt2">Car</option>
       <option value="opt3">Bicycle</option>
    </select>
    
    <div class="mystaff_hide mystaff_opt1">
        some content to show on option House selected
    </div>
    <div class="mystaff_hide mystaff_opt2">
        some content to show on option Car selected
    </div>
    <div class="mystaff_hide mystaff_opt3">
        some content to show on option Bicycle selected
    </div>

    javascript/jquery

    //add collapse to all tags hiden and showed by select mystuff
    $('.mystaff_hide').addClass('collapse');
    
    //on change hide all divs linked to select and show only linked to selected option
    $('#mystuff').change(function(){
        //Saves in a variable the wanted div
        var selector = '.mystaff_' + $(this).val();
    
        //hide all elements
        $('.mystaff_hide').collapse('hide');
    
        //show only element connected to selected option
        $(selector).collapse('show');
    });

    si necesita más bloque de código conectarse hacer uno de seleccionar la opción, sólo añadir la clase «mystaff_hide» y clase «mystaff_[el valor de la opción]»

Dejar respuesta

Please enter your comment!
Please enter your name here