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/[email protected]/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/[email protected]/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

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.