Wie kann ich mit D3 (oder javascript), um eine form option als "selected"

Ich versuche zu lernen D3. Ist es elegante eine Möglichkeit, die Suche durch alle Optionen in einem select-Formular-element, und geben Sie eine option mit einem entsprechenden Wert als "ausgewählt"?

var xStat = "G";

var statOptions = {
    "Points": "PTS",
    "Goals": "G",
    "Assists": "A",
    "Penalty Minutes": "PIM"
};

//create the select element
var selectUI = d3.select("#horse").append("form").append("select");

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

//add values to the options
selectUI.selectAll("option").data(d3.values(statOptions)).attr("value", function(d) {
    return d;
});


//create a func to check if the value of an option equals the xStat var
//if yes, set the attribute "selected" to "selected"
var checkOption = function(e, i, a) {
    if (e[i]["value"] === xStat) {
        return e[i].attr("selected", "selected");
    }
};

//selectUI.selectAll("option").forEach(checkOption);
selectUI.selectAll("option").call(checkOption);​

Habe ich meinen nicht funktionierenden Versuch zu tun, diese hier:
http://jsfiddle.net/sspboyd/LzrAC/2/

Dank.

  • Was genau meinst du mit elegant?
  • Ich habe bearbeitet die ursprüngliche Frage zu löschen, 'elegant'. Ich war nicht bewusst, dass das Wort eleganten hatten einen Einfluss auf das problem zu verstehen ich versuche zu verstehen. danke.
InformationsquelleAutor sspboyd | 2012-10-27
  1. 4

    Diese scheint zu funktionieren:

      selectUI.property( "value", xStat );

    Neuling mich und war Fummelei, die auf das gleiche Problem.
    Wenn dies nicht der richtige Weg ist, ich wäre daran interessiert zu wissen, was ist.

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

    • Dies ist die beste Antwort die ich gesehen habe.
    InformationsquelleAutor sai
  2. 3

    Nach der überprüfung einige Werte mit den breakpoints habe ich herausgefunden, wie man diese Arbeit zu machen. Das problem war mit den letzten paar Zeilen code. Die überarbeitete (und funktionierende) code ist:

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

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

    War ich immer zwei Dinge falsch. Zuerst war ich mit .call() statt .jedes() (jede/call API-Referenz).

    Zweiten, ich hatte angenommen, dass bei Auswahl der option Elemente in selectUI würde mir ein array mit der option html-Elemente, die ich testen konnte, durch die Suche nach "Wert" den Wert des jeweiligen array-Eintrag. Blick auf die Konsole (danke chrome) habe ich schließlich herausgefunden, dass ich eigentlich immer die Werte der jeweiligen option Eintrag. Ich habe keine Ahnung, warum dies der Fall ist. Ich würde gerne wissen, ob jemand erklären kann. Auch landete ich verweisen auf die option element über "this", keine Ahnung, warum das funktioniert entweder.

    Hoffe, dies hilft jemand anderes. Ich habe aktualisiert die jsfiddle-Beispiel auf der jetzt funktionierenden code.
    http://jsfiddle.net/sspboyd/LzrAC/3/

    Stephen

    InformationsquelleAutor sspboyd
  3. 0

    Hinzufügen, dass diese mich daran zu erinnern, und weil ich konnte nicht finden alle anderen Lösungen. Dank Steven Ihr code, der mich in die richtige Richtung, aber ich konnte es nicht verwenden, weil ich nicht haben eine statische variable zu vergleichen. ich.e xStat. Mein Wert war im dataset verwendet, um das wählen Sie in den ersten Platz.

    Ich diese verwendet, einfacher und bedeutet, dass Sie im Vergleich zu anderen datasets - obwohl ich keine Fehler mehr gefunden es hat ein zusätzliches Attribut in der select-tag. der code ist:

        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 });

    Mein Wert für die ausgewählte option wird in einem Datensatz (d....Primary_CauseID), aber dies könnte auch ein statischer Wert. Fügen Sie einfach dieses als value-Attribut des select-Tags, und Lesen Sie dann die select-tag mit (f.attr("value")), während Sie die ae-erstellen der Optionen. Es scheint zu funktionieren.

    InformationsquelleAutor Lessobvious
Schreibe einen Kommentar