I have a dropdown input, with 3 options: Option A, Option B, and Option C. I want to configure the dropdown such that once something is selected, I show a different value. For example, upon clicking and selecting Option A, the input will show ‘A’ instead of ‘Option A’. And if I choose Option B, the input will show ‘B’ instead of ‘Option B’.
How do I do this?
hi @raelyn ,
i would use a variable here then bind the text based on that variable.
for example, say your variable is called dropdownSelectedOption. Have a workflow that updates the variable whenever an option is clicked. So when option A is clicked, the variable updates to value A.
Then you can bind the text of the input to if(dropdownSelectedOption = “A”, “A”, “Option A”). This will render “Option A” and change to “A” when the variable changes.
Hope that helps!
Jack
Hey Jack, what if I have over 100 options? Is there a more efficient way haha if not that will be a lot of workflows… 
Are you loading those 100 options from a database? If so, you can bind the dropdown options in the Items field. Then have a single workflow ‘when this item is clicked, update variable with item_data.name’. Then bind the input text to the variable.
Seems like a solvable problem and happy to provide some more thoughts if you drop in some screenshots or provide more context @raelyn.
Jack
Hey @Jack, actually, what I am trying to do is to select a country from a dropdown.
So basically I am trying to replicate this, where upon being selected, we only show the country code and not the country name:
Both design and behaviour has issues which I cannot solve 
When I try to do this in weweb, I face 2 problems, one of which is that the width of the dropdown element can only be either short or long, it can’t be flexible whereby if the dropdown is open, the options have a longer width, but once selected, the selected option is of a shorter width.
Second problem, is that I only want +61 to show up, and not the country name /:
Here’s how it looks like now (forced to be short)
@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
Hey @Jack , i definitely need to check out how to create a custom element, hahaha - as I know little code. Meanwhile, could you elaborate more on what you mean by this (above quote)?
Right now, I binded the dropdown element options to a list of countries variable array:
Following your instructions, I also have a variable that updates on change of the dropdown element (called result.countrycode):
I’ve binded the “initial value” of the dropdown to my variable value:
But when I select an option in the dropdown, it is not showing this result.country_code variable value but the full country name…
Hi Raelyn,
I recorded a quick Loom overview for you here.
I was just referring to creating this component yourself when i said ‘custom component’, instead of using the WeWeb pre-built phone number component. I find that its usually easier to start from scratch if you are trying to replicate something unique.
Jack
Hey @Jack, thank you that was very helpful. Please don’t delete the Loom haha I will come back in a few days to build this
One question: Is the “Dropdown” just a regular container, how did you get it to nicely show up underneath the +1 box?
@raelyn it is the WeWeb Drop-down element where it’s visibility is bound to a variable that is changed to true when the dark part of the input is clicked.
If you scroll down in the editor, you can change the drop-down to be positioned relative to the top of the input. I like to make this value [height of input + 8px] so that it rests 8px before the input. You can then adjust its width to a % of the parent input.
Awesome!! You can try to add a little input on top of the list so people can type to search
You may have to add an extra level (div) to separate your search from your list inside your dropdown
Also, @raelyn one thing to think about is the UX with closing the dropdown. You’ll want your users to be able to click anything outside of the dropdown to close it. How I accomplish this is to have an empty div called ‘backdrop’ that is also bound to the same variable. You make it fixed position at 0 0 0 0 so that it covers the entire screen, and you adjust the z-index to 99 so it transparently sits on top of all other content. On backdrop click, mark the variable as false. Then you give your dropdown content a z-index of 100 so that it’s above the backdrop. This allows users to click anywhere outside the dropdown to close it.
Another expected behavior is for users to click the dark group when the dropdown is open to close the dropdown. So instead of always marking the variable as true on click, I adjust the workflow to set the variable as not([variable’s current value]). This will toggle the variable to open the dropdown when its closed, and close it when its opened.
Adding some screenshots before in case helpful.
you can split the values to return the last word! if you have option A split the value of the dropdown to return only the A
