How to retrieve selected value from <select> element?

  • j.ulian4976-1325220582215647332

    J.ulian

    3 months ago

    event.target does not provide any data. Therefore, I should be able on change event to (query)select the element and get the current selected value. Cannot find an easy native solution in Toddle, while I do think this is a common usecase. Have set the array index as value attribute via repeater function. I was unable to set an ID for the <select> element.
    βœ…1
  • You can use the input or change events for the select element
  • Set the value to pass along on the <option> element
  • It's fine to repeat the option element over an array
  • j.ulian4976-1325223278352007250

    J.ulian

    3 months ago

    What do you mean by this?
  • lucasg-1325223430584533183

    Lucas G

    3 months ago

    The option element is what sets the options for the select element
  • The select element passes the option's value when a choice is made
  • The input/change event is set on the <select> element but the value passed is set on the <option>
  • j.ulian4976-1325224599759097917

    J.ulian

    3 months ago

    Mmmm...
    My select element has the event listener on change and the options have the index as an attribute.

    But on change I need to retrieve that attribute of the selected option. How do I target this?
    1325224599713091644-image.png
  • lucasg-1325224961195114537

    Lucas G

    3 months ago

    What do you mean it has it as attribute
  • Use the value attribute on the option element
  • j.ulian4976-1325225199301427282

    J.ulian

    3 months ago

    Each option has an attribute value="${index}", where index corresponds to the array position
  • j.ulian4976-1325228450893795469

    J.ulian

    3 months ago

    OK. Not sure what was the issue. Apparently the variable was not updating but now is...
    Problem miraculously solved πŸ§™β€β™‚οΈ
    Thanks for your time, Lucas.
    πŸ‘1

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code β€” but accessible to your entire team!

Try toddle β€” it's free!

Β© Copyright 2024 toddle. All rights reserved.