Select object on multiple columns Topic is solved

[yvesf]

Hello,

Currently, the select object generates a list in a single column only. Is there any select object that supports multiple columns? I would like to have all the options in the same object rather than in multiple select objects side by side.

Capture d’écran 2025-03-01 222108.png

Thanks for your help.

Yves

[steven]

Hi yves,

I asked your question, along with adding your example screenshot into grok.com.


Here's its response...

select.png

Try it yourself (the answer is bigger than my attached graphic.)


Steven

[steven]

Yves,

If you want to create something that looks like a Select Object with more than one column.

Try asking Grok this...

can you create a div that looks like an HTML Select Object by creating a div I'll refer to as the MAIN div, with every row having its own div and each value from the uploaded file, sitting side by side in its own div inside the row div.
with the value column being the language column in the file.
The first row should not scroll. Include any JavaScript or CSS required in the same html file

And uploading a table like this...

daysfilled.zip

Will get you this...

select2.png

Steven

[kev1n]

Thanks, Steven! It's always amazing to see what AI can generate. I was curious whether Select2 could handle multi-column dropdowns, and a quick look at the documentation shows that we can use templateResult and templateSelection to format the display as needed.

Using nuBuilder's nuOnSetSelect2Options callback, we can define how the options appear in the dropdown.
This means we can achieve the multi-column effect directly within Select2.

select_multi_columns.gif

This lets us show multiple columns while keeping Select2’s built-in features like search and keyboard navigation.

Attached is a sample form (select2_multi_columns_demo) that can be imported into an existing nuBuilder database.
Form Code is "select2_multi_columns_demo"

2025-03-02_073615.png

select2_multi_columns_demo.txt

[yvesf]

Hi Kevin,

Is it possible with your solution to select only one item instead of a pair? The purpose of this feature is to display all options without requiring vertical scrolling in the list, but I’d like to be able to select items one by one.
Many thanks again for your continuous support,

Yves

[kev1n]

I see, you don’t want a separate column for the same item (e.g., to show additional data for an option), but instead, you want all items to be individually selectable. I’m not sure if this can be achieved with Select2—further investigation is required. Otherwise, you might want to consider a solution like the one Steven suggested.

[kev1n]

This also looks promising:

https://shawnchin.github.io/jquery-gentleSelect/

[yvesf]

This is exactly what I was looking for—a solution that allows me to request the content of the list via an SQL query, just like it's done with a select element. I'm building a sentence builder that uses a list of sentence fragments (see attached Usage.gif).

Usage.gif

I have a subsidiary question: How can I implement this gentleSelect in nuBuilder? It’s proving to be quite challenging for me, so any help would be greatly appreciated!

Yves

[steven]

Yves,

The job of the helpers on the forum is not to give you a fish, its to teach you how to fish.


Steven

[kev1n]

You can add external resources in nuconfig.php. (See forum post)

Alternatively, you can add external resources via Setup → Header.

Usage, see gentleSelect documentation.