zoom map based on selected value on the drop down list

Question

Good day,

I am having trouble with the D3 map that i created. i want to zoom the world map not by clicking on the country but selecting on the drop down list of countries inside the drop down control.

here is my code..

        var dispatch = d3.dispatch("load", "countrychange");
         d3.csv("data/ERSreputationBlocked.csv",type, function (error, country) {
      if (error) throw error;
      var countryById = d3.map();
      country.forEach(function (d) { countryById.set(d.id, d); });
      dispatch.load(countryById);
      dispatch.countrychange(countryById.get("PH"));
      //console.log(country);
  });
  dispatch.on("load.menu", function(countryById) {
      var select = d3.select("body")
        .append("div")
        .append("select")
        .on("change", function () {                       dispatch.countrychange(countryById.get(this.value)); });

      select.selectAll("option")
        .data(countryById.values())
        .enter().append("option")
        .attr("value", function (d) { return d.id; })
        .text(function (d) { return d.Country; });

      dispatch.on("countrychange.menu", function (country) {
          select.property("value", country)
          //loading the value based on the selected data
          var svg1 = d3.select("body").append("svg1")
                .attr("width", width)
                .attr("height", height)
          //end of selection

         console.log(country);
      });
  });
  //end of drop down

  function type(d) {
      d.total = d3.sum(d.value, function (k) { return d[k] = +d[k]; });
      return d;
  }  

is there a way on how to manipulate this...