How Can I Use D3 (or Just Javascript) To Set A Form Option As Being "selected"

I am trying to learn D3. Is there an elegant a way to search through all the options in a select form element and specify an option with a matching value as being 'selected'? var x

Solution 1:

This appears to work:

  selectUI.property( "value", xStat );

Newbie myself and was fumbling on the same issue. If this is not the right way, I'd be interested to know what is.

http://jsfiddle.net/saipuck/LzrAC/9/

Solution 2:

After checking some values with breakpoints I've figured out how to make this work. The problem was with the last few lines of code. The revised (and working) code is this:

var checkOption = function (e) {
    if(e === xStat){
        return d3.select(this).attr("selected", "selected");
    }
};

selectUI.selectAll("option").each(checkOption);

I was getting two things wrong. First, I was using .call() instead of .each() (each/call API reference).

Second, I had assumed that selecting the option elements in selectUI would give me an array of the option html elements which I could test by looking for 'value' of each array entry. Looking at the console (thank you chrome) I eventually figured out that I was actually getting the values of each option entry. I have no idea why this is the case. I'd love to know if someone can explain. Also, I ended up referencing the option element via 'this', no idea why that works either.

Hope this helps someone else. I've updated the jsfiddle example to the now working code. http://jsfiddle.net/sspboyd/LzrAC/3/

Stephen

Solution 3:

Adding this to remind myself and because I could not find any other solutions. Thanks Steven your code put me in the right direction, but I could not use it because I did not have a static variable to compare to. i.e xStat. My value was in the dataset used to create the select in the first place.

I used this, its simpler and means you can compare to different datasets - although I found no errors it does add an extra attribute in the select tag. the code is:

var f = c.append("select")
        .attr("id", "dpc")
        .attr("value", function (d) { return d.Primary_CauseID })
        .style("height", "30px");

    var temp2 = f.selectAll("option").remove();

    d3.json("key_data21.aspx", function (dataset) {
    temp2.append("option")
    .data(dataset)
    .enter()
    .append("option")
    .attr("value", function (d) { return d.InsertID })
    .attr("selected", function (d) { if (d.InsertID == (f.attr("value"))) { return"selected" } })
    .text(function (d) { return d.Desc_Text });

My value for the selected option is in another dataset (d.Primary_CauseID), but this could also be a static value. Just add this as a value attribute to the select tag, and then read the select tag using (f.attr("value")) while you ae creating the options. It seems to work.

Solution 4:

Sai's answer worked for me. I had actually tried it once before, but from reading through the other replies I realized that you have to create the select options before you set the value on the select.

// create the options
selectUI.selectAll("option").data(d3.keys(statOptions)).enter().append("option").text(function(d) {
    return d;

THEN you can do ...

selectUI.property( "value", xStat )