0

Uso el plugin boostrap select, pero tengo problemas al trae los datos. No trae nada.

introducir la descripción de la imagen aquí

Código html:

<td>CLIENTE: </td>
<td>    
  <select class="selectpicker show-menu-arrow" name="xcliente" id="p3"  data-style="form-control"  data-live-search="true" title="-- Seleccione --" multiple="multiple">
  <?php while ($fila = $cliente_0->fetch_array()) { ?>
        <option value="<?php echo $fila['0']; ?>"><?php echo $fila['2']; ?></option>
  <?php } ?>
  </select>
</td>

Código Javascript:

<script>
    $('.selectpicker').selectpicker({
      style: 'btn-default'
    });
</script>

Por ultimo los enlaces externos de las librerías:

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css'>

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>

1 respuesta 1

0

Aparte de las librerías que pusiste, tienes el resto de librearías que "bootstrap-select" necesita para funcionar?

Todos los requisitos estan en su documentación:

Bootstrap-select requires jQuery v1.9.1+, Bootstrap’s dropdown.js component, and Bootstrap's CSS. If you're not already using Bootstrap in your project, a precompiled version of the Bootstrap v3.3.7 minimum requirements can be downloaded here. If using bootstrap-select with Bootstrap v4+, you'll also need Popper.js. For all of Bootstrap v4's requirements, see Getting started. A precompiled version of the requirements will be made available in an upcoming release of bootstrap-select.

**Aclaración: Al poner el código de ejemplo note que usas una versión de bootstrap-select antigua, al usar las mas recientes el problema queda solucionado

<!doctype html>
<html lang="es">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap 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 rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css'>

  <title>Hello, world!</title>
</head>

<body>
  <table>
    <tr>
      <td>CLIENTE: </td>
      <td>
        <select class="form-control selectpicker show-menu-arrow" name="xcliente" id="p3" data-live-search="true" title="-- Seleccione --" multiple="multiple">
          <option value="1">Opcion 1</option>
          <option value="2">Opcion 2</option>
          <option value="3">Opcion 3</option>
          <option value="4">Opcion 4</option>
          <option value="5">Opcion 5</option>
          <option value="6">Opcion 6</option>
          <option value="7">Opcion 7</option>
          <option value="8">Opcion 8</option>
        </select>
      </td>
    </tr>
  </table>
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

</html>

1
  • Gracias. Ahora tengo un problema tengo un archivo que tiene el codigo del menu, adentro de este archivo tengo esta linea <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"> esta linea me esta dando conflicto con mi combo buscador.
    – Alexis
    el 15 may. 2019 a las 19:15

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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