d3.js 如何使用D3(或仅使用javascript)将表单选项设置为“选中”

eufgjt7s  于 2022-11-12  发布在  Java
关注(0)|答案(4)|浏览(142)

是否有一种方法可以搜索select表单元素中的所有选项,并将具有匹配值的选项指定为“selected”?

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

我在这里包含了我的非工作尝试:http://jsfiddle.net/sspboyd/LzrAC/2/

lymgl2op

lymgl2op1#

这看起来是可行的:

selectUI.property( "value", xStat );

我自己也是新手,在同样的问题上也是笨手笨脚的。如果这不是正确的方法,我很想知道什么是正确的。
http://jsfiddle.net/saipuck/LzrAC/9/

0g0grzrc

0g0grzrc2#

在检查了一些带有断点的值之后,我找到了如何使其工作的方法。问题出在最后几行代码上。修改后的(和工作的)代码如下:

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

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

我犯了两个错误。首先,我使用的是.call()而不是.each()(each/call API引用)。
其次,我假设在selectUI中选择option元素会给予一个option html元素的数组,我可以通过查找每个数组条目的'value'来测试它。(谢谢chrome)我最终发现我实际上得到的是每个选项条目的值。我不知道为什么会这样。我很想知道是否有人能解释一下。另外,我最终通过'this'引用了option元素,也不知道为什么这样做。
希望这对其他人有所帮助。我已经将jsfiddle示例更新为现在可以工作的代码。http://jsfiddle.net/sspboyd/LzrAC/3/
斯蒂芬

vzgqcmou

vzgqcmou3#

添加这个是为了提醒自己,因为我找不到任何其他的解决方案。谢谢Steven,你的代码让我找到了正确的方向,但是我不能使用它,因为我没有一个静态变量来比较。即xStat。我的值在最初用于创建选择的数据集中。
我使用了这个,它更简单,意味着你可以比较不同的数据集-虽然我没有发现任何错误,它确实在选择标记中添加了一个额外的属性。代码是:

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

我为所选选项指定的值在另一个数据集中(d.Primary_CauseID),但这也可能是一个静态值。只需将其作为value属性添加到select标记中,然后在创建选项时使用(f.attr(“value”))读取select标记。看起来很有效。

bfnvny8b

bfnvny8b4#

Sai的answer对我很有效,我以前确实试过一次,但是通过阅读其他回复,我意识到在设置select的值之前必须创建select选项。

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

然后你可以做...

selectUI.property( "value", xStat )

相关问题