title: dropdown menu for Zooming to bbox (d3.js)
body: <p>I am trying to zoom in bbox depending on the option of drop down menu, I tryed the code <a href="https://stackoverflow.com/questions/37835815/d3-js-zooming-to-bbox-with-a-dropdown-menu?noredirect=1&amp;lq=1t">D3.js - Zooming to bbox with a dropdown menu</a> but it is not working,and here is a <a href="https://jsfiddle.net/danaAtmeh/8gq786LL/" rel="nofollow noreferrer">js fiiddle of my work</a></p>
  
  <pre><code>&lt;div id="LayerCover"style="display: inline-block;"&gt;
              &lt;/div&gt; //this is the div where drop down menu must place 
  
      function mapZoomgDorow(file){
  
      d3.queue()
      .defer(d3.json, "Data/Updated_map.json")
      .await(menuChanged);
  
      }
      function menuChanged(error, jordan) {
        if (error) throw error;
  
  
          var select = d3.select('#LayerCover')
          .append('select')
  
  
          select.selectAll("option")
          .data(jordan.features)
          .enter().append("option")
          .filter(function(d) { return d.properties.Level == '1' })
          .text(function(d) { return d.properties.Name_1; console.log(d.properties.Name_1); })
          .on("click",clicked)
  </code></pre>
  
  <p>this give me the drop down menu but when I click nothing happened ,note that my function clicked is just like <a href="https://bl.ocks.org/mbostock/4699541" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/4699541</a> </p>