How to change what's displayed in the selected option of dropdown?

Hi, I am using the phone input and trying to replicate this:
image

Basically, I only want the flag and country code to be shown when selected.

But when people open the dropdown options, I want the flag, country name, and country code to be shown.

Currently, both have to be the same…

Sorry I don’t get the question. Is the design the issue or the behavior of the field?

Design! Basically, after I select something in the dropdown, I want the field to show something else (just the flag and the country code). And then when you open the dropdown to choose, I want the flag, country code, and country name to show.

Right now, after I select an option in the dropdown, what is shown is still the same as what’s in the dropdown, but I don’t want the country name to be displayed after it’s been selected due to space constraints.

This is what’s being shown (the design), the value is alright.

Did you get to do what you wanted to do?

Yup, by building everything from scratch :slight_smile:

I get the message “You are repeating more than 200 items. For performance reason we do not render more. Please paginate your data, or bind to an other source”. Clearly this is because of the collection, I have 250 items. In a table it can be solved by pagination, but how to do it in this case?
image

I haven’t found a solution for this. I just let all the variables be rendered at the same time. If Weweb has a solution for this I would be happy to hear

The 200 limit is only for the Weweb editor, the live app can render more than 200, it’s just whether the browser can handle it…

And tell me more about the simultaneous display of variables, I didn’t quite get it.

Exactly what you are doing now - I just ignore the error…

Hi @icos, @raelyn :wave:

This section of the user docs should help: Select & Multi-select | WeWeb documentation

Let me know if not.

Not really hahaha because I am not using the select element, as I only want the flag and country code to display upon being selected (without the country name), but there’s no option to change what’s being displayed upon being selected for the select element.

So I built everything form scratch but that doesn’t have the infinite scroll function so the 200+ items loading error persists. T.T haha

@Joyce, thanks for the link, the volume turns out to be an update and I can probably implement, but when connecting a collection from the element tree everything disappears?
I’m left with a Div and a picture.


@Joyce and also, I want to apply the method from the video “Search & select: advanced options for better performances” but something doesn’t work.
I connect two collections to Input select in a workflow to pull in the image and the country code that is selected in Input select. Is that right?

Hi @icos :wave:

Could you share a screen recording or screenshots of how things are setup and where you are stuck?

I hope it’s clear).

I think so.

Here’s a video I made that I think covers your use case: icos - phone select with flag — Tella

If not, you might want to jump on next Tuesday’s Office Hours with Q and Flo to get more real-time feedback.

Great, thanks, it’s almost working.
It remains to realize the possibility of entering only digits and number mask.
Displaying the code in the placeholder is not quite convenient (although, as an option), when dialing the number it disappears. It is solved by inserting a text element before the number.

I’ve already realized that the code should be studied, so I’ve already started. What do you advise, what should I pay more attention to?