How can I connect an SVG image to the selection menu?

Question

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

I have an SVG image, which is a map (map of the region), divided into sectors (these are cities). That's right, SVG works just fine. In addition, I have a simple drop-down list (in HTML).

This is what I want:

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

I have attached images.

THANKS TO LOOK.

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>

Run code

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


});

Run code

UPDATE 2:

OK, thanks, I updated your code as follows:

// 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();

Run code

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>