javascript - 如何将 SVG 图像连接到选择菜单？

Question

好的，我有一个问题，也许是一个简单的问题，我是新手。

我有一个 SVG 图像，它实际上是一张 map (区域 map )，按扇区(即城市)划分。一切正常，SVG 完美运行。此外，我还有一个简单的下拉列表(转换为HTML)。

这就是我想要的:

当有人在菜单中选择一个选项(城市)时，选择器(地区)显示为已选中。而且，当有人选择选择器(地区)时，菜单中的选项(城市)显示为已选中。

我附上了图片。

非常感谢。

更新:

下拉菜单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');
    	$(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');
        
    });


});

更新 2:

好的，谢谢大家，我已经像那样升级了你的代码:

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

点击和选择的改变只能用事件处理程序来处理。

您需要做的就是给每个 map 区域一个 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>