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

**URL:** <https://community.weweb.io/t/dropdown-input-how-to-display-a-different-value-upon-being-selected/3959>\
**Category:** How do I?\
**Created:** [August 21, 2023, 4:22pm UTC](https://community.weweb.io/t/dropdown-input-how-to-display-a-different-value-upon-being-selected/3959 "2023-08-21T16:22:12Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Jack](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/jack/32/5915_2.png) [@Jack](https://community.weweb.io/u/Jack)\
**Post date:** [August 22, 2023, 2:50am UTC](https://community.weweb.io/t/dropdown-input-how-to-display-a-different-value-upon-being-selected/3959/6 "2023-08-22T02:50:30Z")

</div>

@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 🙂 .

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

---

_[View the full topic](https://community.weweb.io/t/dropdown-input-how-to-display-a-different-value-upon-being-selected/3959)._