Example Leaflet control to choose features using an HTML select element

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css">
<div id="map" style="width:500px; height:500px"></div>
////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
////////////////////////////////////////////////////////////////////////////////////////////

var map = new L.Map('map').setView([-13, -54], 3);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

////////////////////////////////////////////////////////////////////////////////////////////
//adding the data//
////////////////////////////////////////////////////////////////////////////////////////////

var stations = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "STATION": "Rio Parana&#237;ba",
      "ST_CODE": "MGRP",
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-46.132551833299999, -19.209860611100002]
    }
  }, {
    "type": "Feature",
    "properties": {
      "STATION": "Varginha",
      "ST_CODE": "MGV1",
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-45.434993111099999, -21.5426228611]
    }
  }, {
    "type": "Feature",
    "properties": {
      "STATION": "Vi&#231;osa",
      "ST_CODE": "VICO",
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-42.8699895, -20.761500555600001]
    }
  }, {
    "type": "Feature",
    "properties": {
      "STATION": "Belo Horizonte",
      "ST_CODE": "MGBH",
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-43.924896972200003, -19.941900861099999]
    }
  }]
};

var markerLayer = L.geoJson(stations, {
    onEachFeature: function (feature, layer)
    {
        layer.bindPopup("<b>" + feature.properties.STATION + "</b><br>" +
    "Station Code: " +...

JavaScript

////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
////////////////////////////////////////////////////////////////////////////////////////////

var map = new L.Map('map').setView([-13, -54], 3);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

////////////////////////////////////////////////////////////////////////////////////////////
//adding the data//
////////////////////////////////////////////////////////////////////////////////////////////

var stations = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "STATION": "Rio Parana&#237;ba",
      "ST_CODE": "MGRP",
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-46.132551833299999, -19.209860611100002]
    }
  }, {
    "type": "Feature",
    "properties": {
      "STATION": "Varginha",
      "ST_CODE": "MGV1",
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-45.434993111099999, -21.5426228611]
    }
  }, {
    "type": "Feature",
    "properties": {
      "STATION": "Vi&#231;osa",
      "ST_CODE": "VICO",
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-42.8699895, -20.761500555600001]
    }
  }, {
    "type": "Feature",
    "properties": {
      "STATION": "Belo Horizonte",
      "ST_CODE": "MGBH",
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-43.924896972200003, -19.941900861099999]
    }
  }]
};

var markerLayer = L.geoJson(stations, {
    onEachFeature: function (feature, layer)
    {
        layer.bindPopup("<b>" + feature.properties.STATION + "</b><br>" +
    "Station Code: " + feature.properties.ST_CODE);
    }
}).addTo(map);
map.fitBounds(markerLayer.getBounds());

////////////////////////////////////////////////////////////////////////////////////////////
//creating the selector...