show all options of <select> without scroll bar

Asked

Viewed 566 times

3

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

javascript jquery css html5

  • Possibly this is a problem in CSS and not in JS

  • Renato, I tried several changes in CSS and none reflected on the screen. Unbelievably in IE opens without scroll and with all the options available, only in Chrome and Firefox is occurring this.

  • your code seems incomplete, the variable items is not defined, try adding an executable code with Ctrl + M in the editor

3 answers

2

You can use the property size to put the amount of options that select will have, only with this all 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 in 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>

0

I’d use that if you’re sure you don’t have many options.

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

By adding the onclick and onblur as this.size=0 you cause when selecting an option or when the element loses focus, it closes all options.

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

0

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

If you really need to control the appearance of select I suggest using some plugin, as the Chosen for example.

Browser other questions tagged javascript jquery css html5

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