d3 dropdown load json

choropleth.js

var data; // loaded asynchronously

var path = d3.geo.path()
.projection(d3.geo.albersUsa()
.scale(1400)
.translate([680,360]));

var svg = d3.select("#chart").append("svg")
.attr("width", 1280)
.attr("height", 800);


var counties = svg.append("g")
    .attr("id", "counties")
    .attr("class", "Blues");

var states = svg.append("g")
    .attr("id", "states");

/*
var toAjax = {"county_stats": {"year": '2002',"stattype": 'Flip10'}};

//start of slider for map
$("#slider").slider({
    range: "min",
    value: 0,
    min: 0.00,
    max: 10.00,
    slide: function (event, ui) {
    //insert the changing of years here to the ajax call
    var val = ui.value;
    $("#sliderVal").val(val);            
        }
    });
    $("#sliderVal").val($("#slider").slider("value"));
    */

d3.json("../data/us-counties.json", function(json) {
  counties.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("class", data ? quantize : null)
      .attr("d", path);
});

d3.json("../data/us-states.json", function(json) {
  states.selectAll("path")
      .data(json.features)
    .enter().append("path")
      .attr("d", path);
});


d3.json(("flip10.json"), function (json) {
    data = json;
    counties.selectAll("path")
    .attr("class", quantize);
    
   
    
});

//start of downdown selection
var options = $("#selectValue");
    var myOptions = ['Flip10.json', 'Flip1.json', 'Flip0.json'];
    $.each(myOptions, function (index, value) {
        $(options).append(new Option(value, value, true, false));
    });

d3.selectAll("#selectValue").on("change", change);

var timeout = setTimeout(function() {
  d3.select("select[value=myOptions]").property("selected", true).each(change);
}, 2000);

function change(){
    clearTimeout(timeout);
    
    //path = "path"([this.value]));
    path.attr("class", quantize);

}


function quantize(d) {
  return "q" + Math.min(8, ~~(data[d.id] * 9 / 12)) + "-9";
}