【Javascript・DOM】プルダウンによりカテゴリーを絞りながら、リストを追加する - 新卒から文系エンジニア→人材業界に転職した人のブログ

【今回の内容】

今回は、

　・プルダウンの動的生成

　・動的生成したプルダウンに属性・テキストを与える

　・動的に生成したプルダウンで選択した情報をもとに

　　リストを追加する

というのをやります。

ＤＯＭ、たくさん使います

ざっくりいうと

・既存のプルダウン→追加するリストのカテゴリーを決定する

・新規作成されるプルダウン→追加するリストを決定する

※既存のプルダウンで追加するリストの範囲を絞るイメージです。

【処理の流れ】

１、既存のプルダウンを選択する

２、１のイベントハンドラ（onChange）によりfunction add()の呼び出し

３、新規のプルダウンが作成され、１で選択したカテゴリーのリスト名が

　　新規のプルダウンの選択肢に表示される

４、新規のプルダウンからリストを追加したいリスト名を選択をすると、

　　イベントハンドラ（onChange）により選択したリストの情報（ulのid）

を取得

５、４で取得した追加したいリストの情報を元に、追加ボタンを押下時に

　　「リンク先」・「リンク名」を追加する

【補足】

１、「function add()の処理内容」

　（０）、すでに新規のプルダウンがあるかの判定処理

　　　→if*1

n_select.appendChild(n_option);

for(var i=0;i<option_text.length;i++){

n_option=document.createElement("option");

n_option.setAttribute("value",option_text[i].id);

n_option.appendChild(document.createTextNode(name[i].innerHTML))

n_select.appendChild(n_option);

}

n_select.setAttribute("onChange","select_ul=this.options[this.selectedIndex].value");

document.getElementById("n_select_place").appendChild(n_select);

}

function add_list(select_ul){

var list_value=document.getElementById("Input_str").value;

var url1=document.getElementById("Input_list_url").value;

list_url=document.createElement("a");

list_url.href=url1;

var list_text=document.createTextNode(list_value);

list_url.appendChild(list_text);

var new_list=document.createElement("li");

new_list.id="new_list"+count;

new_list.appendChild(list_url);

document.getElementById(select_ul).appendChild(new_list);

}

htmlファイル

<html>

<head>

<body>

</br>

<option value="ul1"id="" >情報をあつめる</option>

<option value="ul2"id="" >一か所にまとめる</option>

</select>

リンク名<input type="text" value="" id="Input_str">

リンク先<input type="text" value="" id="Input_list_url">

<li onmouseover="" ><a href="http://b.hatena.ne.jp/">はてぶブックマーク</a></li>

<li><a href="http://itpro.nikkeibp.co.jp/?rt=nocnt">Itpro（検索）</a></li>

<li><a href="http://engineer.typemag.jp/">エンジニアtype</a></li>

<li><a href="http://knowledge.sakura.ad.jp/biz/489/">IT勉強会まとめ</a></li>

</ul>

<li><a href="http://d.hatena.ne.jp/JavaBlack/">華麗なる辛口Java</a></li>

<li><a href="http://smoothfoxxx.livedoor.biz/">マインドマップ的読書感想文</a></li>

<li><a href="http://itjob.pgtop.net/">仕事が楽しくなるプログラミング入門講座</a></li>

</ul>

<li><a href="http://togetter.com/li/299807">最強のIT系かあちゃんからたかしへのアドバイス</a></li>

<li><a href="http://d.hatena.ne.jp/choconta/20101102">かつてネトゲで数十人を率いた妻の「マネジメント論」</a></li>

<li><a href="http://www.assioma.jp/?p=3844">奇妙な国日本で、これから社会人になる人達へ</a></li>

<li><a href="http://engineer.typemag.jp/article/sesierse">SIer業界についてその①</a></li>

<li><a href="http://hotchemi.hateblo.jp/entry/2013/09/01/103951">SIer業界についてその②</a></li>

</ul>

</div>

<li><a href="http://evernote.com/intl/jp/">Evanote</a></li>

<li><a href="https://www.dropbox.com/">dropbox</a></li>

<li><a href="https://www.google.com/intl/ja/drive/about.html">GoogleDrive</a></li>

</ul>

</div>

count=0;

select_ul=0;

window.onload=add_select;

window.onload=add_list;

</script>

</body>

</html>

*1:!document.getElementById("add")))

　（１）、新しいプルダウンを作成

　（２）、新しいプルダウンのoptionに付加したい情報を取得

　　　2-1　パラメータでdivのidを取得（document.getElementById(select_option)）

　　　2-2　divの範囲の要素ノードを取得（target_ul.getElementsByTagName("ul")）

　（３）、2で取得した情報をfor文の中でoptionに与える

　　　　・１で選択したカテゴリー（画面でいう情報をあつめるとか一か所にま　　　　　　　とめる）のリスト名

　　　　・追加したいリストのid（valueに追加）

　（４）、最後に新規作成プルダウンにイベントハンドラonChangeを埋め込む。

　　　選択したoptionのvalueを保存しておき、追加ボタンを押下時に追加したいリスト　　　を特定するため。

　２、「setAttribute・getAttributeと要素オブジェクト.valueの使い分け」

　これはちょっと気をつけた方がいいと思いました

　自分もどちらも使っても同じだと勘違いしていました。

　どうやら変更されるような可変のvalueを使用したいときは、

　　要素オブジェクト.value

　を使った方がよいようです。

　参考サイト：http://www.softel.co.jp/blogs/tech/archives/1595

【参考ソース】

.jsファイル

function add_select(select_option){

if((!document.getElementById("add"))){

n_select=document.createElement("select");

n_select.id="add";}

else{

var del_select=document.getElementById("add");

del_select.length=0;

}

var target_ul=document.getElementById(select_option);

var option_text=target_ul.getElementsByTagName("ul");

var target_name=document.getElementById(select_option);

var name=target_name.getElementsByTagName("h3");

n_option=document.createElement("option");

n_option.setAttribute("value","");

n_option.appendChild(document.createTextNode(""