Show / Hide elements with Select Dropdown and HTML data attributes [SOLVED]

General
1

Hi all,

I am trying to solve a problem, where I am not allowed to use ID / CLASS selectors but must use data attributes.

I need to show and hide elements based on the selection from a drop down. The catch is that there are some items that can be shown alongside other elements, and some that are strictly to be shown alone / with specific elements. I have created a Pen to make it easier to understand:

https://codepen.io/JackEdwardLyons/pen/QQWXYP?editors=1001

Basically, if the data attribute has ‘OR’ then you can show one element or the other (within the data attribute list).
If the data attribute has ‘AND’ then it must show the selected item AND the other element in the data attribute list.

I hope this makes sense. I am like 80% there, but I know my logic is a bit dodgy and would love to find a cleaner solution! Thanks :slight_smile:

3

Yeah that’s correct :slight_smile:

5

Hey thanks for the response.

If it just has one item in the data attribute list, then only that one should show.

If it has ‘OR’ then show the element if the selected value from the dropdown list is either / or.

If it has ‘AND’ then show the elements that have the selected value.

I know its confusing… my logic is wonky, perhaps there is a better way to do it?

6

I realise this example is a bit contrived and not the real thing, but close to what I am trying to achieve. Sorry if it doesn’t make sense!

8

I thought I answered your reply above?

Sorry, there is probably a better way to do this, but I’m stumped!

10

Ok, I have solved the issue using a JSON object in the data attribute for the select field and for each DOM element. Here is the full example, as you can see the HTML is hard to read cause its all auto generated with PHP. But The JS logic is hopefully a bit more readable.

I didn’t know this, but data attributes can hold objects and arrays! On the select element I created a data attribute to hold a JSON object, like so:

data-dynamic-content='{ "http_basic": "standard_login", "matrix": { "0": "standard_login", "1": "matrix_message" }, "oauth": "oauth_login", "oauth2": "oauth2_login", "digest": "standard_login" }'

Then on each element that requires toggling, I add another data attribute, like so:
data-show-if="standard-login"

And then I check for the clicked select option, and if there are more than one items to show, I can loop through them and show the right ones!

Here’s the working demo:

https://codepen.io/JackEdwardLyons/pen/QQWXYP?editors=1011

11

Cool example of how data-attributes could be used! Thanks for posting the working example.
I’m a beginner when it comes to javascript but since you’re already working with jQuery wouldn’t another solution be to use attribute selectors and look for ‘keywords’ within the ID’s?

12

Yes, you’re totally correct. The “usual” way to do this would just be to use ID selectors. But I needed this to be a bit more flexible, as there would be multiple items that show at the same time. Plus I wasn’t allowed to use ID selectors because this needed to be a function that was easily reuseable across the codebase.

A good tip to remember every time you build something ---- Ask yourself, how reuseable is this code? Does it totally depend on specific DOM elements, or can I build this function so it works with any DOM element :slight_smile:

13

Does it totally depend on specific DOM elements, or can I build this function so it works with any DOM element?

At this point I’m just happy to get things working ( :face_with_hand_over_mouth: ) but you make an excellent point.
Also just saw your roadtrip app and now I really can’t wait to get started with vue, stay awesome!

14

Thanks for checking it out!!

Also here is another method that works with data attributes, much simpler as well.

https://jsfiddle.net/rny3ncow/22/

1 Like