populate and handle dropdown list within d3.js html - foreignObject

[js]

Hello list

I would like to place a dropdown list within (or on) a svg created with d3.js.
This is my code which works:

    var yrslct = new Date().getFullYear();
      
     var svg = d3.select("#chart")
        .append("svg")
            .style("background", d3.rgb(225,225,225)) // background of chart
            .attr("width", 500)
            .attr("height", 300)
        .append("g")
            .attr("transform", "translate(" + 5 + "," + 5 + ")");
   
    var legend = svg.append("g")
      .attr("class", "legend")
      .attr("x", -5)
      .attr("y", 5)
      .attr("height", 250)
      .attr("width", 450);

    // tried to place the dopdown list on the svg-area
    legend.append("foreignObject")
      .attr("x", 100)
      .attr("y", 200)
      .attr("width", 200)
      .attr("height",55)
     .append("xhtml:body")
      .style("font", "14px")
      .style("z-index", 9)
      .html("<p><select id='yrselect'><option value="+yrslct+">"+yrslct+"</option><select/></p>");

Example: http://jsfiddle.net/vRW7v/6/ .

Now, I tried to populate the dropdown list using d3.js. This is working when the dropdown list is placed outside the svg, but not inside the svg foreign object.
I would greatly appreciate any help you can give me in working this problem.

The extented code:

 
    var yrslct = new Date().getFullYear();
    function range(a,b,c,d){d=[];c=b-a+1;while(c--)d[c]=a++;return d};
    var dpyrs = range(1869,yrslct);

    var selectUI = d3.select("#droplist")
             .append("select")
             .attr("id","yrselect")
             .selectAll("option")
             .data(d3.values(dpyrs))
             .enter()
             .append("option")
             .attr("value", function(d){return d;})
             .text(function(d){return d;});

    var checkOption = function (e) {
        if(e === yrslct){
            return d3.select(this).attr("selected", "selected");
        }
    };
   
    selectUI.selectAll("option").each(checkOption);
   
    var svg = d3.select("body")
        .append("svg")
            .style("background", d3.rgb(225,225,225)) // background of chart
            .attr("width", 500)
            .attr("height", 300)
        .append("g")
            .attr("transform", "translate(" + 5 + "," + 5 + ")");
   
    var legend = svg.append("g")
      .attr("class", "legend")
      .attr("x", -5)
      .attr("y", 5)
      .attr("height", 250)
      .attr("width", 450);

    // tried to place the dopdown list on the svg-area
    legend.append("foreignObject")
      .attr("x", 100)
      .attr("y", 200)
      .attr("width", 200)
      .attr("height",55)
     .append("xhtml:body")
      .style("font", "14px")
      .style("z-index", 9)
      .html("<p><select id='yrselect'><option value="+yrslct+">"+yrslct+"</option><select/></p>");
      //.html("<div id='droplist' />");

jsfiddle: http://jsfiddle.net/vRW7v/5/