Member Avatar for MJV

I have searched everywhere but im not able to determine if you can show two or more data fields in a combo box. If so can anyone help me with the code to do so as I am stumped. Thanks in advance.

  • 3 Contributors
  • 2 Replies
  • 80 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by kvprajapati

Dani AI

Generated

Short answer for : a native HTML select/options list cannot render true multi-column rows or arbitrary HTML per option — options are treated as plain text and browser styling is limited. That is what meant by "two columns." 's idea of joining fields server-side is a quick workaround when a single visible label is acceptable, but it does not create a multi-column UI. See MDN select element.

Two practical approaches that keep full control of presentation:

  • Keep the native select for accessibility/OS behavior but add extra values as data-* attributes on each option. On change, read selectedOption.dataset in JavaScript and populate other fields or a details panel. See HTML data-* attributes.
  • Build a custom dropdown (ul/li or div rows laid out with CSS grid/flex) so each row can have distinct columns and HTML content. This requires extra work for keyboard handling, focus management, ARIA, and mobile fallbacks.

If an off-the-shelf solution is preferred, use a widget that supports templating (so you can show multiple fields per result) such as Select2 or Chosen, or examine the jQuery UI combobox demo for patterns. Follow the WAI-ARIA combobox guidance for accessibility WAI-ARIA APG. For large lists, add server-side filtering/virtualization to keep performance acceptable.

Recommended Answers

All 2 Replies

Member Avatar for sknake

Are you after a combobox that basically has two columns in it, such as a first and last name on one row in 2 columns?

Member Avatar for kvprajapati

I have searched everywhere but im not able to determine if you can show two or more data fields in a combo box. If so can anyone help me with the code to do so as I am stumped. Thanks in advance.

You may do so by creating a user control. User control may includes TextBox and a DataGrid controls. With built-in Combo control, you may concat fields of table with select query.
For example,

MS-SQL : select tno, tname + ' ' + taddress as data from tablename
Oracle : select tno,tname || ' ' || taddress as data from tablename

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.