-1

Tenho um select que está abrindo seus options acima do mesmo. Creio que seja por conta da quantidade de resultados, tendo em vista que o mesmo vem de uma consulta do banco.

<select class="custom-select" id="insc_cnpj" name="insc_cnpj">
   <option value="" disabled selected>Selecionar CNPJ</option>
   <?php
        $arg = array("select"=>"distinct(insc_cnpj)","tabela"=>"cliente","where"=>"order by insc_cnpj");
        $obj_cnpj = $obj_pdo->getConsultaDI($arg);
        $tl_cnpj = 0;
        if(!empty($obj_cnpj)){
            $tl_cnpj = count($obj_cnpj);
            for($i=0; $tl_cnpj > $i; $i++){
                if(strlen($obj_cnpj[$i]->INSC_CNPJ) > 17){
                    print "<option value='{$obj_cnpj[$i]->INSC_CNPJ}'>{$obj_cnpj[$i]->INSC_CNPJ}</option>";
                }
            }
        }
    ?>
</select>

Gostaria de saber: há como eu definir em que direção o meu select deve abrir?

1 Resposta 1

0

É possivel fazer com que o tamanho do select seja alterado assim exibindo os itens (deve-se especificar a quantidade), para isto deve usar o atributo size="", assim por exemplo:

<select name="setor" size="2">
    <option value="a">setor a</option>
    <option value="b">setor b</option>
    <option value="c">setor c</option>
    <option value="d">setor d</option>
</select>

Você não terá problemas com a diversidade de options com isso sempre abrirá pra baixo, caso isso não ajude recomendo que escolha algum plugin do jQuery UI, são muito eficientes e você pode alterar o select por um auto-complete.

Link recomendado: Select-Menu

Auto-complete: Auto-Complete

Exemplo auto-complete:

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .