1

Estoy con Semantic-ui y armando un select multiple. Para ello pongo en el head de la pagina lo siguiente, como indica la documentación:

<script>
    $('.ui.dropdown')
        .dropdown()
    ;

    $('#select')
      .dropdown()
    ;

    $('#multi-select')
      .dropdown()
    ;
</script>

Por otro lado en el body tengo un combo simple con estas opciones:

<div class="field">
            <label>Tipo de Perfil:</label>
            <select id="select" class="ui fluid search dropdown" multiple name="claseUsuario[]>
                <option value="1">Tipo 1</option>
                <option value="2">Tipo 2</option>
                <option value="3">Tipo 3</option>
                <option value="4">Tipo 4</option>
            </select>
            <span class="ui help"><small>No seleccione nada si es un usuario común</small></span>
        </div>

Ahora bien, ejecutado el código me sale una lista y no un combo como quiero que salga... Alguna noción de por que me pasa esto ?

Arriba de todo en el head defino los vinculos a los archivos js y css claro:

<script src="js/jquery.min.js"></script>
    <script src="js/semantic.js"></script>
    <link rel="stylesheet" href="css/semantic.css" >

introducir la descripción de la imagen aquí

2
  • ¿puedes agregar una imagen de lo que te muestra actualmente?
    – Shaz
    Commented el 20 jun. 2017 a las 2:06
  • ahi agrego una imagen...
    – MNibor
    Commented el 20 jun. 2017 a las 2:08

1 respuesta 1

1

Al parecer cerraste mal unas comillas y agrega el código JavaScript antes de </body>.

    $('#select')
      .dropdown()
    ;
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.js"></script>
<div class="field">
            <label>Tipo de Perfil:</label>
            <select id="select" class="ui fluid search dropdown" multiple name="claseUsuario[]">
                <option value="1">Tipo 1</option>
                <option value="2">Tipo 2</option>
                <option value="3">Tipo 3</option>
                <option value="4">Tipo 4</option>
            </select>
            <span class="ui help"><small>No seleccione nada si es un usuario común</small></span>
        </div>

5
  • sabes que coloque las comillas y sigue sin funcionar... también modifique el orden del css y los js y tampoco... sigue igual...
    – MNibor
    Commented el 20 jun. 2017 a las 2:27
  • Mira el ejemplo del snippet, es tu mismo código, funciona sin problema.
    – Shaz
    Commented el 20 jun. 2017 a las 2:31
  • si si lo estaba revisando !!! por que sera ?
    – MNibor
    Commented el 20 jun. 2017 a las 2:37
  • Probaste poniendo el JavaScript al final del código, antes de </body>?
    – Shaz
    Commented el 20 jun. 2017 a las 2:39
  • siiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii era eso !!! gracias Shaz !!!
    – MNibor
    Commented el 20 jun. 2017 a las 2:59

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.