how can I connect an SVG image to a select menu?

Question

Ok, I have a problem, maybe an easy problem, I'm a newbie.

I have a SVG image that is acctualy a map (a region map), divided in sectors (that are the cities). All is right, the SVG works perfectly. Also, I have a simple drop-down list (into HTML).

This is what I want:

when someone select an option (a city) in the menu, the selector (the region) appears selected. And, when someone select the selector (the region) the option in the menu (the city) appears selected.

I have attach images.

THANK YOU SO MUCH.

UPDATE:

drop-down menu 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 for SVG image:

$(document).ready(function() {


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

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

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

    });

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

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

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

		}

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


});

UPDATE 2:

OK, thanks all, I have upgrade your code like that:

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

Your approach is more complicated than it needs to be. The hover stuff you can just leave up to CSS.

The clicking and select changing can just be handled with event handlers.

All you need to do is give each map region an id and assign a corresponding value to each <option> element.

Then just update the select, and change the class of the region based on whether you click or change the select field.

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