This script is designed to map the location between two cubicles so that people in large office buildings can figure out where they need to go to get to that other person. I've almost got it...

I have two different dropdown menus I'm working with.

By default, the dots on the page display.

Each dot corresponds to a name on the dropdown list.

When you select the name under the first dropdown, the other dot will disappear, and then if you select the name under the other dropdown, the first one disappears.

When you select a name from "Where am I?"... then all dots disappear except that dot. What I want to happen is when you select a name from "Where are you?"... then I want both dots to show, but not every dot that shows by default.

I can get one or the other, but not both.

Here's the JS I have to toggle between the two...

$('#mapMe').change(function() {

        var selectedMeChoice = $('#mapMe option:selected').val();
        if (selectedMeChoice == 'ALL'){
            $('[mechoice = "'+selectedMeChoice+'"]').slideDown(1000);
            $('[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);


$('#mapThem').change(function() {

        var selectedThemChoice = $('#mapThem option:selected').val();
        if (selectedThemChoice == 'ALL'){
            $('[themchoice = "'+selectedThemChoice+'"]').slideDown(1000);
            $('[themchoice != "'+selectedThemChoice+'"]').slideUp(1000);

I think it has something to do with the slideUp/slideDown function, but I can't figure it out...

I have created a jsfiddle here.