我如何使用D3（或只是javascript）将表单选项设置为“已选中” [英] How can I use D3 (or just javascript) to set a form option as being "selected"

问题描述

我试图学习D3。是否有一种优雅的方式来搜索select表单元素中的所有选项，并指定一个匹配值为selected的选项？

  var xStat =G; 
 
 var statOptions = {
Points：PTS，
Goals：G，
Assists：A，
惩罚分钟：PIM
}; 
 
 //创建select元素
 var selectUI = d3.select（＃horse）。append（form）。append（select）; 
 $ b $ //创建选项
 selectUI.selectAll（option）.data（d3.keys（statOptions））.output（）。append（option）.text（function （d）{
 return d; 
}）; 
 
 //将值添加到选项
 selectUI.selectAll（option）。data（d3.values（statOptions））。attr（value，function（d）{
 return d; 
}）; 
 
 
 //创建一个func来检查一个选项的值是否等于xStat var 
 //如果是，将属性selected设置为selected
 var checkOption = function（e，i，a）{
 if（e [i] [value] === xStat）{
 return e [i] .attr（selected ，选定）; 
} 
}; 
 
 // selectUI.selectAll（option）。forEach（checkOption）; 
 selectUI.selectAll（option）。call（checkOption）; 
  

已经包括了我在这里做的非工作尝试：
http://jsfiddle.net/ sspboyd / LzrAC / 2 /

感谢。 这似乎工作：

  selectUI.property（value，xStat）; 
  

新手自己也在同一个问题上摸索。
如果这不是正确的方式，我很想知道是什么。

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

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

I've included my non-working attempt at doing this here: http://jsfiddle.net/sspboyd/LzrAC/2/

Thanks.

解决方案

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/

这篇关于我如何使用D3（或只是javascript）将表单选项设置为“已选中”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！