All topics

Setting Select Drop Down Option based on URL Parameter

Fisher

1 month ago
I'm able to get the URL Parameter from the URL, and set the Value of the Select option based on it, but I can't seem to figure out how to set which Select option is chosen based upon the URL param.

It's like the Value is being set, but the Label isn't changing.
Dov

1 month ago
Hi. I was working on a similar thing yesterday. You need to create an attribute called "selected" on each option. Then to set it do an equals to the option name. There might be an easier way but it worked for me.
👍1
Fisher

1 month ago
Thank you @Dov, looks like that is the way to do it. My Option is Repeated from an API though, so I've only got one. I'll keep digging. Still, the Select is doing something now (instead of nothing) based on the URL param. Thanks!
Dov

1 month ago
Glad to have helped you.
Lucas G

1 month ago
The selected attribute is to specify which item in the list should be the default
Like when the select item is loaded
@Dov
Hi. I was working on a similar thing yesterday. You need to create an attribute called "selected" on each option. Then to set it do an equals to the option name. There might be an easier way but it worked for me.
Lucas G

1 month ago
In this case, when you have multiple options, you can just set the attribute directly to true and that’s what the select element will default to
@Fisher
I'm able to get the URL Parameter from the URL, and set the Value of the Select option based on it, but I can't seem to figure out how to set which Select option is chosen based upon the URL param.

It's like the Value is being set, but the Label isn't changing.
Lucas G

1 month ago
Can you post a video/screenshot of the setup?
@Lucas G
Can you post a video/screenshot of the setup?
Fisher

1 month ago
Can do, but I'm planning on changing some things up based on Dov's feedback. My plan is instead of having the select options be based on a repeat formula, to have it static, but show/hide based on if the number of results for that option is >0. So like if the Glider option is 0 then it just wouldn't show as an option.
My options don't really change that much, so they don't really need to be based on the repeat... they can be more static and I think it will be fine.
Lucas G

1 month ago
I prefer to repeat them, personally
You can still set the show/hide logic even if it is repeated
As for the selected attribute, the formula shown in the screenshot is how you'd use the selected attribute when working with a repeated option. Otherwise, you just set the attribute directly to true
And again, the selected attribute is to specify which item is the default option when the select element loads
Not to show which item is selected on user input
@Fisher
Can do, but I'm planning on changing some things up based on Dov's feedback. My plan is instead of having the select options be based on a repeat formula, to have it static, but show/hide based on if the number of results for that option is >0. So like if the Glider option is 0 then it just wouldn't show as an option.
Lucas G

1 month ago
Can you show the option setup in toddle? You mentioned you use a value from a URL param
How do you use it?
Fisher

1 month ago
Sure! I just grab the URL param and set it to the Select Value.
Lucas G

1 month ago
Ah, and you are trying to set this on load, correct?
Like to show that this is the option that was searched?
Fisher

1 month ago
Exactly
Lucas G

1 month ago
The selected attribute is what you need then
Remove it from value
Add teh selected attribute and use that formula in it instead
Except add item equals {{param}}
Does that make sense?
Value is set on the option item
And that's what the select element passes along
The select element itself doesn't actually have a value attribute
Fisher

1 month ago
I'm not sure if this is quite what you mean, but.... This all needs to go on the Option, (not select) and I need a Selected Attribute which has this formula. The category variable is set On Load based on the URL Param.
@Fisher
I'm not sure if this is quite what you mean, but.... This all needs to go on the Option, (not select) and I need a Selected Attribute which has this formula. The category variable is set On Load based on the URL Param.
Lucas G

1 month ago
You got it
You can remove the value attribute from the select element as well
As that element doesn't actually have a value attribute
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes
Fisher

1 month ago
Thanks @Lucas G! I owe you beers (plural)
👍1

Setting Select Drop Down Option based on URL Parameter

Fisher

Dov

Fisher

Dov

Lucas G

Lucas G

Lucas G

Fisher

Lucas G

Lucas G

Fisher

Lucas G

Fisher

Lucas G

Fisher

Lucas G

Fisher

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community