opening direction of the select

Asked

Viewed 49 times

-1

I have a select that is opening their options above it. I believe it is on account of the amount of results, bearing in mind that it comes from a consultation of the bank.

<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>

I wonder: there is how I define in which direction mine select should open?

html-select

1 answer

0

It is possible to make the size of the select be changed by displaying the items (you must specify the quantity), for this you must use the attribute size=", so for example:

<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>

You will have no problems with the diversity of options with this will always open down, if it does not help recommend that choose some plugin jQuery UI, are very efficient and you can change the select by an auto-complete.

Recommended link: Select-Menu

Self-complete: Auto-Complete

Auto-complete example: 

<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>

Browser other questions tagged html-select

You are not signed in. Login or sign up in order to post.