Member Avatar for OmniX

I would like to create a scrolling combo box.

By which I mean.

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>

Should appear as just 1 option (so maybe size="1') and then once clicked it expands with the options with a scrollbar which only 3 options shown and you scroll to see the rest of the options.

Hopefully you understand what I mean?

Thanks, Regards X

Note: Not sure if this requires just html but I heard requires javascript, Thanks.

  • 4 Contributors
  • 4 Replies
  • 122 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

As described, the goal is a collapsed control that shows one selected item and, when opened, displays a subset (for example 5 of 20) with an internal scrollbar. Browsers render native dropdowns with OS widgets, so you cannot reliably force the exact number of visible rows on open across platforms. See the browser behavior notes on the native element at MDN — select element.

Practical options you can pick from:

  • If a permanently-visible listbox is acceptable, use the native size behavior to show N rows (but it won’t be a collapsed single-line control).
  • Use an input + datalist for lightweight searchable suggestions (limited styling control). See MDN — datalist element.
  • For a consistent collapsed dropdown that shows a fixed number of visible items with a scrollbar, build a small custom widget (or use a maintained library). As suggested, JavaScript is usually required; ’s links point to older widgets — they’re useful as examples, but prefer modern, maintained libraries or a custom implementation for accessibility and mobile support.

Minimal structure pattern (concept only — adapt for accessibility and keyboard support):

<div class="combo">
  <button class="combo-toggle">Chosen</button>
  <ul class="combo-list" hidden>
    <li data-value="1">Item 1</li>
    <!-- more items -->
  </ul>
</div>

.combo-list {
  max-height: 8em;
  overflow-y: auto;
}

Key cautions: implement keyboard navigation, focus management, closing on outside click, and sync the chosen value to a real form field so forms still submit. For ready-made solutions consider Select2 or the jQuery UI selectmenu. Follow the WAI-ARIA combobox guidance when implementing custom controls: WAI-ARIA Authoring Practices — Combobox. Finally, heed ’s usability point: if users often scan the list, a visible list or a filterable control is often faster than a deep dropdown.

Recommended Answers

All 4 Replies

Member Avatar for Dannyo329

For these type of menus and stuff, its best to use javascript. Even though I don't know alot of javascript, I'd recommend it. Try Google and search how to do that. Although I have never heard of what you just said, so what?! Give it a go and try.

Member Avatar for OmniX

I was looking for a list with 20 items.

And it would only display 5 items.

The rest would be viewed by using a scrollbar inside the drop down menu.

Member Avatar for MidiMagic

Must menus be so complicated and time consuming to use??? Just display a fixed list of 20 items.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.