Dropdown Input: How to display a different value upon being selected?

@raelyn If you are really looking to replicate that, I’d go for building a custom element instead of using the WeWeb pre-built phone number picker. You’ll have a wrapper div with the grey border that holds a dropdown element, a div on the left with an image and text (for the country flag and code), then a transparent input on the right. You can set the width of the dropdown to a percent of the parent group’s width (it looks like your inspiration example is about 75%).

You can load the option data from your back end or just do everything on the front end. If you have 100 options, I’d definitely recommend the back end :slight_smile: .

Your back end should pass an array of objects to WeWeb, each with keys country, country image, and country_code. You can bind the dropdown options to this data. You could even pass a different placeholder for each country if you’re feeling up for it!

I’d recommend having two variables phoneDropdownOpened (boolean, default to false) and activePhoneCountry (object, default to United States). When the user clicks a new option, update the activePhoneCountry variable. The flag and code text within the input should be bound to the activePhoneCountry image and code, so it’ll update automatically.

When you eventually save the user’s phone, you can prepend the current activePhoneCountry code to the user’s input.

I hope that helps - there may be an easier solution. It also makes me wonder how many countries you realistically need to support. If its only a handful, you can just handle everything in WeWeb and have static choices.

Jack