We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

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.