読者です 読者をやめる 読者になる 読者になる

jnobuyukiのブログ

JavaScriptとR言語を中心に研究活動に役立つwebアプリケーション技術について考えていきます。twitter ID: @j_nobuyuki

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

d3.js HTML5 JavaScript

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を利用して、選択肢を作ります。今回はAからEまでの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;});

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

初期値を変更する

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

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