Highlight country once selected with dropdown D3

I have a map of Africa which I loaded using D3 which features several columns including a column named ADMIN which features each country’s name. I’m trying to highlight the country on my map that is selected in my dropdown. For example if I select Algeria in my drop down, Algeria will highlight on my map. The map itself loads fine as well as the dropdown. I’m just having trouble coordinating the interaction between the dropdown function and the highlight function so that the selected country actually highlights.


//begin script when window loads
window.onload = setMap();

var attrArray = ["Algeria","Angola","Benin"];

  var expressed = attrArray[0];



//set up  map
function setMap(){
  //map frame dimensions
  var width = 1200,
      height = 1000;





  //create new svg container for the map
  var map = d3.select("body")
      .append("svg")
      .attr("class", "map")
      .attr("width", width)
      .attr("height", height);

  //create Albers equal area conic projection centered on France
  var projection = d3.geoOrthographic()
    .scale(600)
    .translate([width / 2, height / 2.7])
    .clipAngle(85)
    .precision(.1);



    var path = d3.geoPath()
      .projection(projection)



    var graticule = d3.geoGraticule()
             .step([5, 5]); //place graticule lines every 5 degrees of longitude and latitude

         //create graticule background
    var gratBackground = map.append("path")
             .datum(graticule.outline()) //bind graticule background
             .attr("class", "gratBackground") //assign class for styling
             .attr("d", path) //project graticule

    var gratLines = map.selectAll(".gratLines")
            .data(graticule.lines()) //bind graticule lines to each element to be created
            .enter() //create an element for each datum
            .append("path") //append each element to the svg as a path element
            .attr("class", "gratLines") //assign class for styling
            .attr("d", path); //project graticule lines


    //use queue to parallelize asynchronous data loading
    d3.queue()
      .defer(d3.csv, "data/AfricaCountries.csv") //load attributes from csv
      .defer(d3.json, "data/world.topojson") //load background spatial data
      .defer(d3.json, "data/Africa.topojson")
      .await(callback);

function callback(error, csvData, world, africa){
  //translate europe TopoJSON
        var basemapCountries = topojson.feature(world, world.objects.ne_10m_admin_0_countries),
              africaCountries= topojson.feature(africa, africa.objects.ne_10m_admin_0_countries).features;


         //select graticule elements that will be created
        //add Europe countries to map
        var countries = map.append("path")
          .datum(basemapCountries)
          .attr("class", "countries")
          .attr("d", path);

  //add Africa countries to map
            var regions = map.selectAll(".regions")
              .data(africaCountries)
              .enter()
              .append("path")
              .attr("class", function(d){
                return "regions " + d.properties.ADMIN;
              })
              .attr("d", path);

        createDropdown(csvData);





    };

    function createDropdown(csvData){
        //add select element
        var dropdown = d3.select("body")
            .append("select")
            .attr("class", "dropdown")
            .on("change", function(){
              highlight(d.properties);
            });


        //add initial option
        var titleOption = dropdown.append("option")
            .attr("class", "titleOption")
            .attr("disabled", "true")
            .text("Select Country");

        //add attribute name options
        var attrOptions = dropdown.selectAll("attrOptions")
            .data(attrArray)
            .enter()
            .append("option")
            .attr("value", function(d){ return d })
            .text(function(d){ return d });
    };

    //function to highlight enumeration units and bars
 function highlight(props){
     //change stroke
     var selected = d3.selectAll("." + props.ADMIN)
         .style("stroke", "blue")
         .style("stroke-width", "2");
 };


};