Real size auto fit of the select via option available

Navigation
1

I usually search and do not disturb the patience of the members here, but this time I specifically need an example. See: 

<!DOCTYPE html>
<html>

<body>

    <select id="lista" size="4">
          <option value="A">01</option>
          <option value="B">02</option>
          <option value="C">03</option>
          <option value="D">04</option>
          <option value="E">05</option>
          <option value="F">06</option>
          <option value="G">07</option>
          <option value="H">08</option>
          <option value="I">09</option>
          <option value="J">10</option>
          <option value="k">11</option>
          <option value="L">12</option>
        </select>

    <button onclick="somar()">Carregar Mais</button>
</body>

<script>
    somar = function() {
        var A = document.getElementById('lista');
        var B = A.getElementsByTagName('option');
        var C = B.length;
        B.size = C;
    }
</script>

</html>

Note that I'm starting the element select with size [ size ] of 4 items sample, but what I want is something dynamic - auto height adjustment > of select according to the amount of option . That's why in the example function I'm trying to loop through the items using the documentgetElementsByTagName('option') method. In my view, I thought this might be the solution to an increase when setting the size property.

  

SUMMARY - Give way to automatically set the size property of the HTML element [ select ] without human intervention, let the whole pro task "script" adjust to actual size. The idea is not to display the vertical scroll bar

    
asked by anonymous 10.05.2018 / 03:48

1 answer

2

You are resetting the size attribute in the wrong element: 

B.size = C;

The B is the options ( var B = A.getElementsByTagName('option'); ).

Correct would be A , which is the variable where you stored select : 

A.size = C;

Example: 

somar = function() {
  var A = document.getElementById('lista');
  var B = A.getElementsByTagName('option');
  var C = B.length;
  A.size = C;
}
<select id="lista" size="4">
          <option value="A">01</option>
          <option value="B">02</option>
          <option value="C">03</option>
          <option value="D">04</option>
          <option value="E">05</option>
          <option value="F">06</option>
          <option value="G">07</option>
          <option value="H">08</option>
          <option value="I">09</option>
          <option value="J">10</option>
          <option value="k">11</option>
          <option value="L">12</option>
        </select>
<button onclick="somar()">Carregar Mais</button>

If you want this to be done automatically, you can put in the event function DOMContentLoaded : 

document.addEventListener("DOMContentLoaded", function(){
  var A = document.getElementById('lista');
  var B = A.getElementsByTagName('option');
  var C = B.length;
  A.size = C;
});
<select id="lista" size="4">
   <option value="A">01</option>
   <option value="B">02</option>
   <option value="C">03</option>
   <option value="D">04</option>
   <option value="E">05</option>
   <option value="F">06</option>
   <option value="G">07</option>
   <option value="H">08</option>
   <option value="I">09</option>
   <option value="J">10</option>
   <option value="k">11</option>
   <option value="L">12</option>
</select>
    
10.05.2018 / 04:01
Doubt about the new bootstrap version JPA Cascade Persistence