是否有一种方法可以搜索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/
4条答案
按热度按时间lymgl2op1#
这看起来是可行的:
我自己也是新手,在同样的问题上也是笨手笨脚的。如果这不是正确的方法,我很想知道什么是正确的。
http://jsfiddle.net/saipuck/LzrAC/9/
0g0grzrc2#
在检查了一些带有断点的值之后,我找到了如何使其工作的方法。问题出在最后几行代码上。修改后的(和工作的)代码如下:
我犯了两个错误。首先,我使用的是.call()而不是.each()(each/call API引用)。
其次,我假设在selectUI中选择option元素会给予一个option html元素的数组,我可以通过查找每个数组条目的'value'来测试它。(谢谢chrome)我最终发现我实际上得到的是每个选项条目的值。我不知道为什么会这样。我很想知道是否有人能解释一下。另外,我最终通过'this'引用了option元素,也不知道为什么这样做。
希望这对其他人有所帮助。我已经将jsfiddle示例更新为现在可以工作的代码。http://jsfiddle.net/sspboyd/LzrAC/3/
斯蒂芬
vzgqcmou3#
添加这个是为了提醒自己,因为我找不到任何其他的解决方案。谢谢Steven,你的代码让我找到了正确的方向,但是我不能使用它,因为我没有一个静态变量来比较。即xStat。我的值在最初用于创建选择的数据集中。
我使用了这个,它更简单,意味着你可以比较不同的数据集-虽然我没有发现任何错误,它确实在选择标记中添加了一个额外的属性。代码是:
我为所选选项指定的值在另一个数据集中(d.Primary_CauseID),但这也可能是一个静态值。只需将其作为value属性添加到select标记中,然后在创建选项时使用(f.attr(“value”))读取select标记。看起来很有效。
bfnvny8b4#
Sai的answer对我很有效,我以前确实试过一次,但是通过阅读其他回复,我意识到在设置select的值之前必须创建select选项。
然后你可以做...