也许我的问题不明确,但这就是我要找的:
当我从 svg 中选择一个区域(在我的情况下,多边形)来自广告 rop-down菜单列表,该区域显示为橙色,然后当我从下拉菜单列表中选择另一个区域时,下一个区域显示为橙色,但前一个区域不会消失..为什么?我想只选择一个,而不是两个。
非常感谢
信息:
" SEL1 "是我的下拉菜单的ID
" 多边形"是我的 svg
// start connection between svg and drop down menu
// selection the "polygon" that affect the "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);
});
// select from the menu and have the color on the svg
$("#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
$(".region.selected").removeClass("selected");
// Add "selected" class to new region
$('polygon#' + regionId).addClass("selected");
$('polygon#').find('map-title').css('display', 'block');
// Note: for addClass() etc to work on SVGs, you need jQuery 3+
}
// Init map based on default select value
//onSelectChange();
// done connection between svg and drop down menu
});

polygon.selected {
fill: #ff7409;
}

<!-- drop down menu -->
<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>
&#13;