Full size auto select adjustment via option available

Asked

Viewed 421 times

1

I normally research 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 am starting the element select sized[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 role of example I’m trying to go through the item by the method documentgetElementsByTagName('option'). In my vision, I thought this might be the solution to a increment to define the property size.

SUMMARY - Find a way to automatically set the property size of the HTML element [select] without human intervention, let the whole task pro "script" adjust to full size. The idea is that it does not present the vertical scroll bar

javascript html css select option

  • Pq vc puts the script out of the body?

  • 1

    @dvd I read somewhere online an article by a gringo writer in which he released a book on good web practices [Front-end] and tals. In it he said strongly that developers should look to leave the script(s) at the end, after loading all the content of the page itself. Notice when we access some heavy websites out there, tends to be slow and we see status bar always notifying that there are still elements to be downloaded/loaded. That is, the developer has introduced several scripts at the beginning and body of the page. It gives us the feeling that the Browser will crash.

  • Yes, I’ve read this too, but when it says "at the end", it doesn’t mean after the body, but at the end of it. That’s what I understood. Now you left me in doubt rss. I will search...

  • @So there are other ways to do this. But some scripts require it to be at first depending on the programing as it should see the HTML element to be hit in the DOM. I put that detail in a comment on some questions that I asked around here in the old days. You got more details, I’m going to do a little digging and I’m going to point something out to +.

1 answer

2


You are redefining the attribute size in the wrong element:

B.size = C;

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

The correct thing would be A, which is the variable where you stored the 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 it 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>

  • 1

    Worse than true, I saw there was something strange. I even thought it was incompatibility between browsers, because I’m testing the project in 2 distinct. That’s what comes of spending hours and hours programming, there comes a time my friend that you fall into your own contradiction. rsrs

  • Putz! I’ve been working with HTML for 20 years and I’ve never heard that, but I’m glad if that’s true, it’ll be news to me. I usually use <head> to load libs. But, as I said, I’ve read about putting on the end of <body> to improve performance etc., but never out of it. Although putting in the <head> I never felt problems.

  • I added in the reply the action in the page loading, that’s what I wanted?

  • 1

    Sorry it took me so long to give you one feedback I was looking for the answer I gave about my question where I mention what we were talking about - the inclusion of the delimiter script after the closure of body. The question is this - https://answall.com/a/184284/41467 look at the end of my reply + a colleague’s comment below.

  • Cool! I’ll do some research and send you some news on the subject.

  • I did some research and testing, actually the script works after the </body>, but this is not a valid HTML practice, although browsers look the other way. The validator of W3C tb accuses the error. Anyway, in my opinion, I prefer, in this case, to use at the end of <body>. Abs! :)

Show 1 more comment

Browser other questions tagged javascript html css select option

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