javascript – show all options of<select> no scroll bar

Question:

I have a select that brings information from a JS, but this select is forming a scroll bar and the options are not many and there is space for more options to be shown, but regardless of what I try, I'm not able to make all the data show instead of the scroll bar.

My select call in HTML

<div class="row">
    <div>
        <span>Selecione sua localidade: </span>
        <select id="cities" class="empty" name="cities" onclick="selected(this.value)">
           <option selected >Selecionar</option>
         </select>
    </div>
</div>

Here I organize the Select

 var $select = $('#cities');
            $.each(items, function(index, val) {

              var optgroup = $('<optgroup>');
              optgroup.attr('label', index);

            $.each(val, function(index, val) {
              optgroup.append($('<option>', {
              text: val.loja,
              value: val.idx
                }));
              });

            $select.append(optgroup);
    });

This way it reads the JS file and groups it in the select.

Answer:

You can use the size property to put the amount of options the select will have, just with that all the options will be shown, now if you want to remove the scroll appearance you can add in a parent div, the overflow:hidden.

Tested on IE 9,Chrome 49 and Firefox 45 browsers

Example:

var select = document.getElementById("select");
select.size = select.length;
#container {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  border: solid grey 1px;
}
#container select {
  padding: 10px;
  margin: -5px -20px -5px -5px;
}
<div id="container">
  <select id="select">
    <option>foo</option>
    <option>bar</option>
    <option>foo</option>
    <option>bar</option>
    <option>foo</option>
    <option>bar</option>
    <option>foo</option>
    <option>bar</option>
    <option>foo</option>
    <option>bar</option>
    <option>foo</option>
    <option>bar</option>
  </select>
</div>
Scroll to Top