岩家.net

個人的に今後も使うかも，なのでメモ．

ドロップダウンでない （何て言うんだろ？） リストに，とあるファイルのリストを表示し，いずれかの項目をクリックすると，その項目が示すファイルの情報 （ここでは URL と概要） を alert する．

そんな仕様に応える必要に駆られ，次のようなソースを思いつくまま書いてみました．

<script type="text/javascript">
function func( arg ) {
  alert( arg.url ); // 選択（クリック）した項目が示すファイルのURL
  alert( arg.description ); // 選択（クリック）した項目が示すファイルの概要
}
</script>

<select size="8">
<option onclick="javascript: func( { url: 'ファイル1のURL', description: 'ファイル1の概要' } );">ファイル1</option>
<option onclick="javascript: func( { url: 'ファイル2のURL', description: 'ファイル2の概要' } );">ファイル2</option>
<option onclick="javascript: func( { url: 'ファイル3のURL', description: 'ファイル3の概要' } );">ファイル3</option>
</select>

しかし，これでは IE6 で動作しないことが判明．どうやら option 要素に埋め込んだイベントには反応してくれないようです．（この分野では当然の知識ですかね？）

そこで，select 要素に （onclick） イベントを埋め込むことになったわけですが，上記のものと等価にするにはどうすればいいのやら．．．

しばらく悩んだ挙げ句，各 option 要素の value 属性に JSON を入れてみよう，ということになり，次のようにしてみました．

<script type="text/javascript">
function func() {
  var sel = $( 'sel' ); // prototype.js インポート済みとします
  var opt = sel.options[ sel.selectedIndex ]; // 選択項目の要素
  var val = eval( opt.value ); // 選択項目の要素の値をオブジェクトに

  alert( val.url ); // 選択（クリック）した項目が示すファイルのURL
  alert( val.description ); // 選択（クリック）した項目が示すファイルの概要
}
</script>

<select id="sel" size="8" onclick="javascript: func();">
<option value="({ url: 'ファイル1のURL', description: 'ファイル1の概要' })">ファイル1</option>
<option value="({ url: 'ファイル2のURL', description: 'ファイル2の概要' })">ファイル2</option>
<option value="({ url: 'ファイル3のURL', description: 'ファイル3の概要' })">ファイル3</option>
</select>

とりあえずは望んだ動作をしてくれているようです．IE6 でも．

フォーム内の静的な値を持つ要素，選択リストとかラジオボタンとかチェックボックスとか，の値に JSON を与え，javascript と連携することで，情報を扱うプロセスをほんのちょこっとながらシンプルにできるのではないかな，とほんのちょこっとだけ思ってみました．