如何將SVG圖像連接到選擇菜單？

Question

好吧，我有一個問題，也許是一個簡單的問題，我是一個新手。

我有一個SVG圖像這是acctualy地圖（地區地圖），分爲扇區（即城市）。一切正常，SVG完美運作。另外，我有一個簡單的下拉列表（進入HTML）。

這就是我想要的：

當有人在菜單中選擇一個選項（城市），選擇（區）出現選定。而且，當有人選擇選擇器（區域）時，菜單（城市）中的選項顯示爲選中狀態。

我有附加圖像。

非常感謝。

UPDATE：

下拉菜單中的HTML代碼：

<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>

對SVG圖像的Javascript代碼：

$(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'); 
 
     
 
    }); 
 

 

 
});

更新2：

OK，感謝一切，我有升級您的代碼像：

// 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

你的做法是複雜得多，它需要的。懸停的東西，你可以留給CSS。

點擊和選擇更改只能用事件處理程序處理。

您只需爲每個地圖區域分配一個id併爲每個<option>元素分配相應的值。

然後，只需更新選擇，並根據您單擊或更改選擇字段來更改區域的類別。

$("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>