show all select options without scrollbar

Question

show all select options without scrollbar

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

3

I have a select that brings information from a JS, however this select is forming a scroll bar and the options are not many and there is room for more options to be shown however regardless of what I try I am not able to make all the data is displayed 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 make 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 into select.

javascript jquery html5 css

asked by anonymous 22.03.2016 / 18:03

3 answers

search for a form field with jquery Recombination algorithm

score 1 · Answer 1

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

Tested on browsers IE 9, Chrome 49 and Firefox 45

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>

score 0 · Answer 2

Applying CSS styles to <select> is a very complicated task, because each browser renders in a different way, and I believe there is no way to control the size of the dropdown . >

If you really need to control the look of select I suggest using some plugin, such as chosen for example.

score 0 · Answer 3

I would use this if you are sure you will not have many options.

When modifying the event onmousedown to this.size=this.options.length you have to open the dropdown it always has the exact size of your number of options.

Adding onclick and onblur to this.size=0 causes you to close all options when selecting an option or the element to lose focus.

<select id="cities" class="empty" name="cities" onclick="this.size=0;" onblur="this.size=0;" onmousedown="this.size=this.options.length;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select>