D3.jsを利用してセレクトボックスで任意の項目を初期値に設定する

HTMLでは、セレクトボックスで、多肢選択の質問ができます。選択肢をセレクトボックスに設定するのは、簡単ですが、任意の項目を初期値にする際に、ちょっとはまったので、メモを残します。

セレクトボックスの設置

まずはHTMLでセレクトボックスを作ります。今回は、結果を比較するために、初期値を変更する場合としない場合の二つのボックスを作りましょう。

<form>
<table>
<tr>
<td>Preselect:</td>
<td><select id = "preselectBox"></select></td>
</tr>
<tr>
<td>No Select:</td>
<td><select id = "noPreselectBox"></select></td>
</tr>
<table>
</form>

セレクトボックスに選択肢を作る

次は、D3.jsを利用して、選択肢を作ります。今回はＡからＥまでの5つの選択肢を作ります。

var arr = ['A','B','C','D','E'];

arr.unshift("");

unshift()で配列の先頭に空要素を入れておきます。

d3.select("#preselectBox").selectAll("option").data(arr).enter().append("option").attr("value",function(d){
return d;}).append("text").text(function(d){return d;});

d3.select("#noPreselectBox").selectAll("option").data(arr).enter().append("option").attr("value",function(d){
return d;}).append("text").text(function(d){return d;});

ここまでは２つのセレクトボックスの設定は同じです。

初期値を変更する

最初のセレクトボックスの初期値を「なし」から「Ｃ」に変えてみましょう。作業では２点で引っかかっりました。
まずは、初期値を設定するためのselectedという属性です。この属性は、開発ツールで要素を検証するとselectedという属性名が表示されるだけです。しかし、実際にはbooleanの属性なのでtrueかfalseが入っているようです。
もう一つは、D3での特定の要素のみにselectedを設置する方法です。最終的にfilterを使うことにしました。

d3.select(#preselectBox).selectAll("option").filter(function(d){return d == "C" ? d:null;}).attr("selected",true);