Как использовать переменную, созданную внутри функции $ (document) .body

Question

Я хочу использовать значение переменной optionValue, созданной внутри функции $ (document) .ready. Я продолжаю получать «undefined», когда пытаюсь использовать переменную в строке, как показано в коде:

var optionValue;

$(document).ready(function() {
  $('#dropdownList').on('change', function() {
    var optionVal = $(this).val();
    var optionValue = $('#dropdownList option[value="' + optionVal + '"]').val();
    // selectedlga = $("#dropdownList option:selected").text();
    alert("Selected Option Text: " + optionValue);
  });
});

var geojsonLayer = new L.GeoJSON.AJAX('data/lgacapital.geojson', {
  pointToLayer: function(feature, latlng) {

    var str = "<button id='zoomTo" + feature.properties.CAPITAL.replace(/ /g, '');
    str += "' class='form-control btn btn-primary attraction'>";
    str += feature.properties.CAPITAL + "</button>";

    var str = "<h4>" + optionValue + "</h4><hr>"; // OPTIONVALUE IS THE VARIABLE        
    return L.marker(latlng).bindPopup(str);
  }
});

geojsonLayer.addTo(mymap);