要保持两个热力图之间的选择同步，你可以使用JavaScript和D3.js库来实现。

首先，你需要在HTML页面中创建两个热力图的容器，以及一个用于显示当前选择的元素。例如：

接下来，你可以使用D3.js来绘制热力图。以下是一个示例代码片段：

// 数据集，可以根据需要进行更改
var data = [
  [10, 20, 30],
  [40, 50, 60],
  [70, 80, 90]
];

// 创建热力图的函数
function createHeatmap(containerId, data) {
  var svg = d3.select("#" + containerId)
    .append("svg")
    .attr("width", 300)
    .attr("height", 200);
  
  var rects = svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", function(d, i) { return i * 50; })
    .attr("y", function(d, i) { return i * 50; })
    .attr("width", 50)
    .attr("height", 50)
    .style("fill", function(d) { return "rgb(" + d + ", " + d + ", " + d + ")"; })
    .on("click", function(d) { updateSelection(d); }); // 点击事件触发选择更新
  
  // 选择更新函数
  function updateSelection(selection) {
    d3.select("#currentSelection")
      .text("当前选择: " + selection);
  }
}

// 调用函数创建两个热力图
createHeatmap("heatmap1", data);
createHeatmap("heatmap2", data);

这个示例代码会创建两个相同的热力图，并在点击某个矩形时更新当前选择的元素。你可以根据实际需求修改数据集和其他样式属性来适应你的场景。

请注意，示例代码中使用的数据集是一个简单的二维数组，你可以根据自己的需求修改数据结构和绘图逻辑。同时，你还可以添加其他交互功能，如鼠标悬停效果等，以增强用户体验。