PricingBlog

How to use a select element with multiple enabled

  • burntpancakesyummy-1491258296051568805

    burntpancakesyummy

    5 days ago

    Trying to use the select element with multiple set to true but I can't figure out how to get the selected values from it. I can only get the last selected option.
  • whitep4nth3r-1491718792680833055

    salma

    4 days ago

    Using a custom action you should be able to use selectedOptions
  • I just wrote this custom action which logs out the selected options
  • the action takes an ID of the select element you want to target

    function getSelectedOptions (args, ctx) {
    const selectDropdown = document.getElementById(args.id);

    const selectedOptions = selectDropdown.selectedOptions;

    console.log(selectedOptions);
    }
  • you can trigger that on a button click, for example
  • 1491719106133758012-image.png
  • selectedOptions is also an object, you can get the value of the selected option inside each item
  • 1491719342553956392-image.png
  • whitep4nth3r-1491720223596744715

    salma

    4 days ago

    Hope that helps!
    💯1
  • burntpancakesyummy-1493075648401506385

    burntpancakesyummy

    17 hours ago

    Thank you so much, @salma! I reviewed your messages and checked your example to better understand how this works. 👍🏻

    I successfully implemented an event trigger to return to my component and filter some data. 🎉