Wie kann ich ein SVG-Bild mit einem Auswahlmenü verbinden?

Question

Ok, ich habe ein Problem, vielleicht ein einfaches Problem, ich bin ein Neuling.

Ich habe eine SVG Bild das ist acctualy eine Karte (eine Region Karte), aufgeteilt in Sektoren (das sind die Städte). Alles ist richtig, das SVG funktioniert perfekt. Außerdem habe ich eine einfache Drop-Down-Liste (in HTML). Diese

ist das, was ich will:

, wenn jemand eine Option (eine Stadt) im Menü auswählen, der Selektor (die Region) erscheint ausgewählt. Und wenn jemand den Selektor (die Region) auswählt, erscheint die Option im Menü (die Stadt) ausgewählt.

Ich habe Bilder anhängen.

DANKE SO VIEL.

UPDATE:

Dropdown-Menü HTML-Code:

<label for="sel1">Seleziona Area:</label> 
 
<select class="form-control" id="sel1"> 
 
<option>1 - Udine Centro</option> 
 
<option>2 - Rizzi/S. Domenico/Cormor/S. Rocco</option> 
 
<option>3 - Laipacco/San Gottardo</option> 
 
<option>4 - Udine sud</option> 
 
<option>5 - Cussignacco</option> 
 
<option>6 - S. Paolo/S. Osvaldo</option> 
 
<option>7 - Chiavris/Paderno</option> 
 
</select>

Javascript-Code für SVG Bild:

$(document).ready(function() { 
 

 

 
    $('g.chiavris').click(function() { 
 
     $('g.chiavris').fadeOut('slow'); 
 
    }); 
 
    
 
    $("g.region").hover(function() { 
 

 
     //mouse over 
 
     $(this).find('.map-image').css('fill', '#8B8B8B'); 
 
    \t $(this).find('.map-title').css('display', 'block'); 
 
    }, function() { 
 

 
     //mouse out 
 
     $(this).find('.map-image').css('fill', '#ccc'); 
 
     $(this).find('.map-title').css('display', 'none'); 
 

 
    }); 
 

 
\t $('.region').click(function(event) { 
 

 
\t \t var regions = $('.region'); 
 
\t \t console.log(regions); 
 

 
\t \t for(var i=0; i<regions.length; i++){ 
 
\t \t \t console.log('tutti messi normali '+ i); 
 
\t \t \t $(regions[i]).find('.map-image').css('fill', '#ccc'); 
 
     \t $(regions[i]).find('.map-title').css('display', 'none'); 
 
\t \t \t $(regions[i]).bind('mouseenter mouseleave'); 
 

 
\t \t } 
 

 
\t \t //DOPO 
 
     $(this).find('.map-image').css('fill', '#FF7409'); 
 
     $(this).find('.map-title').css('display', 'block'); 
 
\t \t 
 
     $(this).unbind('mouseenter mouseleave'); 
 
     
 
    }); 
 

 

 
});

UPDATE 2:

OK, bedankt sich bei allen, habe ich Ihren Code wie das Upgrade:

// per selezionare i "polygon" che influisce sul select 
 
    $(".map-image").on('click', function(evt) { 
 
     // Get the id of the region we clicked on 
 
     var regionId = evt.target.id; 
 
     // Update the dropdown 
 
     $('#sel1 option').removeAttr('selected') 
 
      .filter('[value=' + regionId + ']') 
 
      .attr('selected', true); 
 
     // Highlight the relevant region 
 
     setRegion(regionId); 
 
    }); 
 

 
    // Per selezionare dal select e avere il colore nella mappa 
 
    $("#sel1").change(function(evt){ 
 
     //console.log($(this).val()); 
 
     var name_region = ($(this).val()); 
 
     var regions = $(document).find('#'+ name_region).get(0); 
 
     //console.log(regions); 
 
     $(regions).css('fill', '#FF7409'); 
 
    }); 
 

 
    
 

 
    /*function onRectClick(evt) 
 
    { 
 
     // Get the id of the region we clicked on 
 
     var regionId = evt.target.id; 
 
     // Update the dropdown 
 
     $("#sel1").val(regionId).change(); 
 
     // Highlight the relevant region 
 
     setRegion(regionId); 
 
    }*/ 
 

 
    function onSelectChange() { 
 
     // Get selected class from dropdown 
 
     var selectedRegion = $("#sel1").val(); 
 
     // Highlight the relevant region 
 
     setRegion(selectedRegion); 
 
    } 
 

 
    function setRegion(regionId) { 
 
     // Remove "selected" class from current region 
 
     $("polygon.selected").removeClass("selected"); 
 
     // Add "selected" class to new region 
 
     $('polygon#' + regionId).addClass("selected"); 
 

 
     // Note: for addClass() etc to work on SVGs, you need jQuery 3+ 
 
    } 
 

 

 
    // Init map based on default select value 
 
    onSelectChange();

Answer 1

Ihr Ansatz ist komplizierter, als es sein muss. Das Hover-Zeug kannst du einfach CSS überlassen.

Das Klicken und Auswählen ändern kann nur mit Event-Handlern behandelt werden.

Alles, was Sie tun müssen, geben Sie jedem Kartenbereich eine id und weisen Sie jedem <option> Element einen entsprechenden Wert zu.

Dann aktualisieren Sie einfach die Auswahl und ändern Sie die Klasse der Region basierend darauf, ob Sie auf das Auswahlfeld klicken oder es ändern.

$("rect").click(onRectClick); 
 
$("#sel1").change(onSelectChange); 
 

 

 
function onRectClick(evt) 
 
{ 
 
    // Get the id of the region we clicked on 
 
    var regionId = evt.target.id; 
 
    // Update the dropdown 
 
    $("#sel1").val(regionId); 
 
    // Highlight the relevant region 
 
    setRegion(regionId); 
 
} 
 

 
function onSelectChange() 
 
{ 
 
    // Get selected class from dropdown 
 
    var selectedRegion = $("#sel1").val(); 
 
    // Highlight the relevant region 
 
    setRegion(selectedRegion); 
 
} 
 

 
function setRegion(regionId) 
 
{ 
 
    // Remove "selected" class from current region 
 
    $("rect.selected").removeClass("selected"); 
 
    // Add "selected" class to new region 
 
    $('rect#'+regionId).addClass("selected"); 
 
    
 
    // Note: for addClass() etc to work on SVGs, you need jQuery 3+ 
 
} 
 

 

 
// Init map based on default select value 
 
onSelectChange();

rect { 
 
    fill: #ccc; 
 
    stroke: #999; 
 
    stroke-width: 2; 
 
    cursor: pointer; 
 
} 
 

 
rect:hover { 
 
    fill: #888; 
 
} 
 

 
rect.selected { 
 
    fill: #ff7409; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    
 
<svg width="300" height="300"> 
 
    <rect id="region1" x="50" y="0" width="100" height="100"/> 
 
    <rect id="region2" x="150" y="0" width="100" height="100"/> 
 
    <rect id="region3" x="0" y="100" width="100" height="100"/> 
 
    <rect id="region4" x="100" y="100" width="100" height="100"/> 
 
    <rect id="region5" x="200" y="100" width="100" height="100"/> 
 
    <rect id="region6" x="50" y="200" width="100" height="100"/> 
 
    <rect id="region7" x="150" y="200" width="100" height="100"/> 
 
</svg> 
 

 
<div> 
 

 
    <label for="sel1">Seleziona Area:</label> 
 
    <select class="form-control" id="sel1"> 
 
    <option value="region1">1 - Udine Centro</option> 
 
    <option value="region2">2 - Rizzi/S. Domenico/Cormor/S. Rocco</option> 
 
    <option value="region3">3 - Laipacco/San Gottardo</option> 
 
    <option value="region4">4 - Udine sud</option> 
 
    <option value="region5">5 - Cussignacco</option> 
 
    <option value="region6">6 - S. Paolo/S. Osvaldo</option> 
 
    <option value="region7">7 - Chiavris/Paderno</option> 
 
    </select> 
 

 
</div>