How to select only one layer through a Select (leaflet)

I'm trying to select only one layer using a select.

This is my first time with leaflet and I use this great guide: https://maptimeboston.github.io/leaflet-intro/

Now I have on my map the part of "markerclusters" and the last one "heatmap" and I want to choose only one layer or the other or both.. I've been looking for examples but I don't know how to apply them.

(The select right now is ornamental as you can see.)

And here's the image of my map:

Image

here is my code, thanks in advance!

<html>
<head>
  <title>MAPA PRUEBA</title>
   <link rel="stylesheet" href="leaflet.css"/>
  <link rel="stylesheet" href="MarkerCluster.css"/> 
  <script src="leaflet.js"></script>
  <script src="leaflet.markercluster.js"></script> 
  <script src="leaflet.heat.js"></script>
  <script src="jquery-2.1.1.min.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>
<div id="panel" style = "top-left:10px; background-color:#D3D3D3;">
                    <label>Tipo de mapa</label>
                    <select id="estilo" onchange="Bordeaux()">
                      <option value="points" >PUNTOS</option>
                      <option value="heat">MAPA DE CALOR</option>
                      
                    </select>
  <div id="map"></div>

  <script>

 // initialize the map
  var map = L.map('map').setView([40.46, -3.74], 4);

  // load a tile layer
  L.tileLayer('http://192.168.0.103/osm/{z}/{x}/{y}.png',

    {
      attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
      maxZoom: 17,
      minZoom: 1
    }).addTo(map);
    

 // load GeoJSON from an external file

$.getJSON("rodents.geojson",function(data){
    var ratIcon = L.icon({
      iconUrl: 'images/marker-icon.png'});
      var rodents = L.geoJson(data,{
      pointToLayer: function(feature,latlng){
      var marker = L.marker(latlng,{icon: ratIcon});
      marker.bindPopup(feature.properties.Location);
       return marker;}
    });
    var clusters = L.markerClusterGroup();
    clusters.addLayer(rodents);
    map.addLayer(clusters);
}); 

// HEAT LAYER   
 
$.getJSON("rodents.geojson",function(data){ 
   var locations = data.features.map(function(rat) {
// the heatmap plugin wants an array of each location
      var location = rat.geometry.coordinates.reverse();
      location.push(1.9);
      return location;
});

    var heat = L.heatLayer(locations, { radius: 50 });
    map.addLayer(heat);
   
});
  </script>
</body>
</html>

Solution

change the clusters and heat variable to global. And add only one of both layers to the map.

var clusters, heat;

$.getJSON("rodents.geojson",function(data){
    // ...
    clusters = L.markerClusterGroup();
    clusters.addLayer(rodents);
    map.addLayer(clusters);
}); 

// HEAT LAYER   
$.getJSON("rodents.geojson",function(data){ 
 //...
    heat = L.heatLayer(locations, { radius: 50 });
});

Then add / remove the layers in your onchange function from the select:

<select id="estilo" onchange="changeFnc(this)">
   <option value="points" >PUNTOS</option>
   <option value="heat">MAPA DE CALOR</option>
</select>

function changeFnc(obj){
   var value = obj.value;
   if(value == "points"){
      if(map.hasLayer(clusters)){
         map.removeLayer(clusters);
      }
      map.addLayer(points);
   }else{
      if(map.hasLayer(points)){
         map.removeLayer(points);
      }
      map.addLayer(clusters);
   }
}

PS: This code is not tested but should work