TRANCEDIVE

セレクトタグの内容を変える関数

よくあるけど、意外とやり方がわからないですよね。しかし、CGIやPHPなどで使えばかなりユーザビリティをアップできる関数です。サーバサイドスクリプトではどうしても手間がひとつ増えてしまいますが、Javascriptでうまくそれを補えば、格段にユーザビリティがあがるでしょう。深くカテゴライズされたデータベースを扱うときなどはかなり便利ですね。

ソース
<script type="text/javascript"> var d00 = new Array("▲カテゴリを選択してください"); var d01 = new Array("コンボイ総司令官","メガトロン","ロディマスコンボイ"); var d02 = new Array("ガンダム","ザク","ゲルググ","ジオング","ジム","ボール","アッガイ"); var d03 = new Array("孫 悟空","ブルマ","ヤムチャ","プーアル","ウーロン","チチ"); var d00v = new Array("▲カテゴリを選択してください"); var d01v = new Array("コンボイ総司令官","メガトロン","ロディマスコンボイ"); var d02v = new Array("ガンダム","ザク","ゲルググ","ジオング","ジム","ボール","アッガイ"); var d03v = new Array("孫 悟空","ブルマ","ヤムチャ","プーアル","ウーロン","チチ"); function selectOptions(formname,elementname,names){ var valuename = names + "v"; var data = eval(names); var valuedata = eval(valuename); window.document.forms[formname].elements[elementname].length = data.length; for(loop=0;loop < data.length;loop++){ window.document.forms[formname].elements[elementname].options[loop].text = data[loop]; window.document.forms[formname].elements[elementname].options[loop].value = valuedata[loop]; } } </script> //サンプルのフォーム <form name="the_form"><br />サンプル<br><br /><select name="choose_category" onChange="selectOptions('the_form','the_examples',this.value);" style="width:200px;"><br /><option value="d00" selected>▼カテゴリを選択してください</option><br /><option value="d01">トランスフォーマー</option><br /><option value="d02">機動戦士ガンダム</option><br /><option value="d03">ドラゴンボール</option><br /></select><br /><br><br /> <select name="the_examples" multiple style="width:200px;height:100px;"><br /><option>▲上のカテゴリから選択してください</option><br /></select><br /><br><br /></form>

1. HOME
2. REFERENCE
3. JAVASCRIPT TIPS
4. Tips003