Retrieve data from Multiselect list

Home Forums Programming Retrieve data from Multiselect list

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #23029

    Hi!
    I am working on a project where I would like to allow the user to select which “layers” of data to display in the 3D scene, using HTML interface.
    I found several multiselct select boxes example on the net, using javascript, but now I don’t know how to access the selected values from my Puzzles…?
    Here is an example of the multiselect box: https://www.cssscript.com/demo/single-multi-select-vanilla/
    Anyone could help me with that??
    Thanks in advance!

    David

    #23032
    Yuri KovelenovYuri Kovelenov
    Developer

    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

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #23037

    Hi!
    Thanks for your prompt answer! I start to get used to these amazing puzzles, but there is lots to learn!!
    And I’m still struggling…
    In fact I would like to know if a given option inside:
    `<select id=’testSelect1′ multiple>
    <option value=’1′>Item 1</option>
    <option value=’2′ selected=’selected’>Item 2</option>
    <option value=’3′>Item 3</option>
    <option value=’4′>Item 4</option>
    <option value=’5′ selected=’selected’>Item 5</option>
    </select>’

    is selected or not… I cannot build the proper query for that… :( :scratch:

    #23038
    Yuri KovelenovYuri Kovelenov
    Developer

    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. :scratch:

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #23041

    That would be great Thank you very much!
    This dropdown multiselct box is great too I think… this is the one I tried, but I cannot retrieve the “selected” items… :(

    Multiselect Dropdown List With Checkboxes – multiselect.js

    :good:

    #23044
    Yuri KovelenovYuri Kovelenov
    Developer

    Got it working :yahoo:
    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.

    Attachments:
    You must be logged in to view attached files.

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #23047

    That’s awesome!! :yahoo:
    Thank you so much! See you at the next stopper! ;-)

    #23048
    Yuri KovelenovYuri Kovelenov
    Developer

    Sure! Always happy to help! :)

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #23049

    Yeah! But thank you anyway!
    I’ve managed to set up some select boxes exactly the way I wanted, and I also managed to trigger the display of some elements in the 3D view.
    Now one problem appear: for some reason the dropdown list stays open, whatever the option “stayOpen” is set to in the js initialization of the select box… :cry: you solve one thing and another appears!! I need to investigate a bit more I guess! Perhaps something to do with CSS…?
    Attached the project as it is now! :)

    Attachments:
    You must be logged in to view attached files.
    #23058
    Yuri KovelenovYuri Kovelenov
    Developer

    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! :good:

    Attachments:
    You must be logged in to view attached files.

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #23061

    You’re too good! (and you should take a break during your week-ends! ;))
    I was suspecting something with the styling, and that was it… transparent background was not OK! :)

    #23065
    Yuri KovelenovYuri Kovelenov
    Developer

    :good:

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.