Home/ Questions/Q 8963999
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T16:29:09+00:00

I am creating a virtual map of a country, in which when you click

  • 0

I am creating a virtual map of a country, in which when you click on a dot as shown in this picture, below. Now, everything works fine, like you click a red dot, an image and description about the relevant region appears, and when click other red dots the previous one fades away and a new one appears. Perfect! Only problem is, then you select a town / zone from the drop down form, it only pops up the red dots, but I need the image & description also to appear for that selected town/zone.

Here is the jsFiddle

To know the problem, you should click on a red dot first, then when you see the image/description pop up, then select from the drop down menu any zone and even though you will see the the dot only appearing, but the description / image never changes when you select the zone automatically.

thanks for the help

enter image description here

Here is the JS code, are below as the site won’t let me only post the jsFiddle link.

JS

$(document).ready(function() {
// begin Ready

    //...................................................
    // When the form changes
    $('#mapForm').change(function() {

        var selectedContinent = $('#mapForm option:selected').val();
        if (selectedContinent == 'ALL'){
            $('a.dot').slideDown(1000);

        }else{
            $('a.dot[continent = "'+selectedContinent+'"]').slideDown(1000);
            $('a.dot[continent != "'+selectedContinent+'"]').slideUp(1000);
            $('a.dott[continent = "'+selectedContinent+'"]').slideDown(1000);
            $('a.dott[continent != "'+selectedContinent+'"]').slideUp(1000);
        }

    });

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

        var selectedContinentt = $('#mapFormm option:selected').val();
        if (selectedContinentt == 'ALL'){

            $('a.dott').slideDown(1000);
        }else{
            $('a.dot[continent = "'+selectedContinentt+'"]').slideDown(1000);
            $('a.dot[continent != "'+selectedContinentt+'"]').slideUp(1000);
            $('a.dott[continent = "'+selectedContinentt+'"]').slideDown(1000);
            $('a.dott[continent != "'+selectedContinentt+'"]').slideUp(1000);
        }

    });

    // When a dot is clicked
    //...................................................
    $('a.dot').click(function(){

        $('a.dot').removeClass('selected');
        $(this).addClass('selected');

        var city = '.city_detail#' + $(this).attr('city');
        var htmlCode = $(city).html();

        $('.detail_container').fadeOut(500, function(){
            $('.detail_container .city_detail').html(htmlCode);
            $('.detail_container').fadeIn(500);
        });

    });
    $('a.dott').click(function(){

        $('a.dott').removeClass('selected');
        $(this).addClass('selected');

        var city = '.city_detail#' + $(this).attr('city');
        var htmlCode = $(city).html();

        $('.detail_container').fadeOut(500, function(){
            $('.detail_container .city_detail').html(htmlCode);
            $('.detail_container').fadeIn(500);
        });

    });

// end Ready
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just trigger click events on the elements when you are selecting them on the list

    // When the form changes
$('#mapForm').change(function() {

    var selectedContinent = $('#mapForm option:selected').val();
    if (selectedContinent == 'ALL'){
        $('a.dot').slideDown(1000);

    }else{
        $('a.dot[continent = "'+selectedContinent+'"]').slideDown(1000, function(){$(this).trigger('click');});
        $('a.dot[continent != "'+selectedContinent+'"]').slideUp(1000);
        $('a.dott[continent = "'+selectedContinent+'"]').slideDown(1000, function(){$(this).trigger('click');});
        $('a.dott[continent != "'+selectedContinent+'"]').slideUp(1000);
    }

});

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

    var selectedContinentt = $('#mapFormm option:selected').val();
    if (selectedContinentt == 'ALL'){

        $('a.dott').slideDown(1000);
    }else{
        $('a.dot[continent = "'+selectedContinentt+'"]').slideDown(1000, function(){$(this).trigger('click');});
        $('a.dot[continent != "'+selectedContinentt+'"]').slideUp(1000);
        $('a.dott[continent = "'+selectedContinentt+'"]').slideDown(1000, function(){$(this).trigger('click');});
        $('a.dott[continent != "'+selectedContinentt+'"]').slideUp(1000);
    }

});

    See working demo

    • 0