Retrieve data from Multiselect list

Hi David,

From the source code of that selector example, I can see that the button
“get select value” executes the following JavaScript code:

document.getElementById('brandsOne').value

where brandsOne is the ID of the selector placed on the page:

<select id="brandsOne"></select>

So in Puzzles, this corresponds to get attribute > value puzzle:

https://www.soft8soft.com/docs/manual/en/puzzles/HTML.html#get_attribute

I’ll try to figure it out and prepare a working example for the multi-select case. Will get back to this topic hopefully soon.

Got it working
here is what did the trick

1. create a parent HTML document to embed the 3D app. (I copied the listing from here)

2. download the multi-select and copy 2 files from there to 3D app folder:
vanillaSelectBox.css
vanillaSelectBox.js

3. Remove those 2 buttons from index.html and link 2 vanillaSelectBox files in the header. Also add a selector element with some options and a button to retrieve its values.

4. Edit the app JS file (here – my_awesome_app.js) to add the code for initialization of multi-select, and a function for getting multi-select values. Read about it here.

5. Finally, add onclick puzzle for the button and call JS function puzzle to call the above-mentioned retrieval function

Attached an example – it just prints the multi-select’s values to browser console, but you can now use them to hide 3D objects conditionally.

Sure! Always happy to help! :)

Hi David,

It looks like a click on some other element is required to close a multi-select. I modified your project to explicitly display the UI container element, and also made one of the selectors always open to show the difference.

Nice project BTW!