It looks like it's properly targeting just the polygons with the class A, which is good, but no matter what option is chosen, A, B, or C, it just toggles the A polygons between gray & green class css... but I'm wanting to highlight the A polygons only when option A is chosen.
, sorry for the lack of details. Here's the
JSfiddle with all the code
, though for some reason it's not functional there. (It works fine, meaning it does change the CSS, just not the way I want it to, when I open in a normal browser...) Tried your code in there too, but still not functioning properly...
In my searching/learning I saw somewhere that there's a way to toggle off when a different option is selected, which is ultimately what I'm after...
But I'm hoping to include other options too, namely is there a way to have an AND or OR connection between multiple select elements? For instance, highlight just polygons that have class A AND class B? Or, highlight just polygons that have class A OR class B?
Again, thanks - I really appreciate the help. That's just what I'm looking for.
I thought about using radio buttons or checkboxes, but this is just a test/get the code working for a bigger project that is going to have around 150 variables/classes, and I don't want to fill the screen with buttons & boxes obviously. I figure with a few dropdowns (with one of them populating another based on initial option, as I was able to get set up with my X,Y,Z = X1,X2,X3,etc system) I should be able to achieve the same thing - but I'm not well versed enough in jquery yet to know if it's possible to do multiple select boxes or if there's a better overall way to skin this cat.
That amount would probably preclude using radio or checkbox. But selects have the drawback of not being able to unselect without selecting something else. The toggle functions are not well suited for <select>.
Unless, you use <select multiple> so the user can scroll down the list and turn things on and off. If you do, realize that .val() returns an array, so the code becomes a little more complex.
Good luck figuring out what is best for your site.
Sooo... anybody know how to achieve the effect without toggling?
After playing around with the above solution, I realized it won't work for consecutive selections because it's using toggle. For instance, if a polygon has classes A, B, and C, and the option of class A is initially selected, then if B or C is selected next it won't highlight because with A it toggles it on, and then B or C toggles it off.
It seems like it should be relatively straightforward, just "find all polygons with the selected option class, apply this different CSS to those polygons"... but I don't know how to code that...
Hi JΛ̊KE, it's for educational data visualization. Basically I have a bunch of students who took a bunch of classes in a bunch of different majors. I want faculty and administrators to look at a graphic that displays different courses and be able to toggle different variables to see which students have taken which courses. So a English faculty member might want to know how many Psych majors have also taken English courses. Or an administrator might want to see which courses students from Idaho gravitate towards.
Yup - one polygon per student. So each student's classes could consist of home state, major, individual courses taken, GPA categories, etc.
Here's your fiddle with the labels changed, if that helps... it'll be easy to automate hundreds of records to output the code when I get it working, but I'm not going to start on that until I know it'll be fruitful.
Will update the fiddle tomorrow with more polygons/examples...
The changelist is for the second and third select elements (the third populates its options from whatever is selected in the second.) That's to keep from having to list all 50+ majors in one select element... can divide it up into Sciences, Arts, Languages, etc., and then choose specific majors from there.
No reason for the squares - can use any shape, really. But I'm gonna need a big 2d canvas since there's a lot of overlap between courses, majors, etc. that just doesn't fit neatly into rows & columns. (Some students are double majors, some courses are cross-listed (PSY100 & HIS100 are the same course but "in" diff depts, etc.)
I'm still trying to figure out the best way to present it all, and it's possible that basing it on courses or majors isn't the best... but I'm pretty sure the functionality I'm looking for (selected highlighting of svg elements based on class attributes) is what's going to work. Thanks -