0

Estoy intentando importar una librería de css y js que se llama MD Bootstrap, ya que me llamó mucho la atención algunos diseños que manejan y en especifico necesito uno que es para un select multiple pero copio tal cuál el código e importo las librerías y no me funciona, me salta un error de tipo

TypeError: $(...)materialSelect is not a function

Pero se supone que el método es propio de la librería, sí alguien me puede ayudar, se lo agradezco.

Dejo el HTML donde lo importo

<head>
    <meta charset="UTF-8">
    <meta id="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link REL=StyleSheet HREF="\Jomar\users_control\config\estilos.css" TYPE="text/css" MEDIA=screen>
    <link rel="shortcut icon" href="/Jomar/users_control/images/favicon.png">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.9/css/mdb.min.css" rel="stylesheet">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.9/js/mdb.min.js"></script>
    <title>Realizar registro</title>
</head>

Aquí muestran cómo importarlo

Y aquí hago el select multiple que ofrecen ellos HTML

<select class="mdb-select md-form" multiple searchable="Search here..">
                <option value="" disabled selected>Choose your country</option>
                <option value="1">USA</option>
                <option value="2">Germany</option>
                <option value="3">France</option>
                <option value="3">Poland</option>
                <option value="3">Japan</option>
            </select>

JQuery

$(document).ready(function() {
        $('.mdb-select').materialSelect();
    });

Y esta es la demo que ofrecen ellos

6
  • revisaste que los link del CDN estuvieran disponibles?
    – vicasas
    Commented el 4 sept. 2019 a las 15:40
  • Sí, los revisé todos
    – DaxTter77
    Commented el 4 sept. 2019 a las 15:41
  • En que parte de codigo estas llamando a $('.mdb-select').materialSelect();
    – vicasas
    Commented el 4 sept. 2019 a las 15:46
  • Te dejare la respuesta abajo.
    – vicasas
    Commented el 4 sept. 2019 a las 15:49
  • Está arriba, justo al abrir el body
    – DaxTter77
    Commented el 4 sept. 2019 a las 15:52

1 respuesta 1

1

El problema que tienes no es que estas importando mal la libreria, simplemente que estas usando la versión free la cúal te limita a usar ciertos componentes pero para otros debes usar la versión pro que es de pago.

Indicado lo anterior, en la documentación de mdbootstrap si buscas el componente Multiselect te podrás dar cuenta que su uso implica tener una licencia para la versión pro, osea debes pagar o comprar esta versión para hacer uso de el.

Dado lo anterior el error que te muestra por consola...

TypeError: $(...)materialSelect is not a function

Es un error correcto, ya que en las los CDN que se importaron no existe esta función, pero si existe en los CDN de la versión paga.

Espero que te sirva esta respuesta y recuerda de revisar la documentación de lo que estas usando antes de... este es el mejor recurso que tienes (la documentación)

RECOMENDACIÓN PARA MULTISELECT

Puedes probar usar MaterializeCSS tiene un buen componente para multiselect y lo mejor es que NO DEPENDE DE JQUERY ! también puedes usar Material For Web

3
  • Ya lo veo, tienes toda la razón, gracias
    – DaxTter77
    Commented el 4 sept. 2019 a las 15:57
  • De nada, edite mi respuesta y te deje unos enlaces de muy buenas librerías que son open source ! (:
    – vicasas
    Commented el 4 sept. 2019 a las 16:00
  • Gracias, el problema es que ya estoy usando bootstrap y materialize lo cambia
    – DaxTter77
    Commented el 4 sept. 2019 a las 16:39

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.