JavaScript/select要素周りのメモ

• [ Prev ]
• [ Next ]
• [ JavaScript ]

JavaScriptというよりはHTML寄りのメモになってしまうが、JavaScriptによる制御も混じりやすい内容なのでこちらにメモしておく。

• "Javascript (JS) Tutorial - Select Object, select box option events, value, selected"
  • http://www.hscripts.com/tutorials/javascript/dom/select-events.php
  • select要素のEvent制御の細部(onChange/onMouseDown/...などがどのタイミングで発生するのか)がまとめられている。基本的にはonChangeを使うのが多いと思うが、他のEventも使いたい場合は目を通しておくと良いかも知れない。
• "JavaScriptでセレクトボックスの連動 | ARTS NET"
  • http://www.artsnet.jp/archives/445
  • prototype.js版でJavaScriptでセレクトボックスを生成するヒントなどが載っている。
• "javascriptでプルダウンメニュー(オプションメニュー)を開くことができるでしょう... - Yahoo!知恵袋"
  • http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1412454844
  • JavaScriptから、select要素(プルダウンメニュー)を開くことが出来るか、という質問。出来ないっぽい。
• "Can I open a dropdownlist using jQuery - Stack Overflow"
  • http://stackoverflow.com/questions/360431/can-i-open-a-dropdownlist-using-jquery
  • こちらも同様の質問で、やっぱり出来ないっぽい。"click"イベント自体は発生させる事が出来るが、"click"イベントがすなわちプルダウンメニューが開く事にはならない、とのこと。

select要素とは少しずれるが、<ul>や<li>とJavaScriptを組み合わせたDropDownメニューを使う場合がある。
この時、z-indexやpositionの指定によっては上手くDropDownメニューがオーバーラップしない場合があるらしい。そうした場合のトラブルシュートらしき記事が３件ほど見つかったので載せておく。

• "IE z-index & drop down menu"
  • http://archivist.incutio.com/viewlist/css-discuss/57365
• "Drop Down List vrs Z-Order - ASP.NET answers"
  • http://bytes.com/topic/asp-net/answers/339579-drop-down-list-vrs-z-order
• "CSS Creator Z-index Issues For Vertical Drop Down Menu"
  • http://csscreator.com/node/26492

お仕事で試そうとしたのは、プルダウンメニューを開く時にAjaxでオプション項目を取得して生成し直す、という挙動。一応onMouseDownイベントに差し込む事で出来たのだけれど、onMouseDownイベント中でselectの要素をクリアしてAjaxの結果から追加し直す、とやってしまうと、現在選択中の項目が保持されず、項目が変わらなかった場合の挙動がおかしくなってしまう。
selectとoptions要素で実装するのは素直に諦めて、<div>やul/liなどの通常のDOM要素でプルダウンメニューを実装した方が良いかもしれない。

MSDNよりselect要素に関するMicrosoft公式ドキュメント:

• "SELECT Element | select Object"
  • http://msdn.microsoft.com/en-us/library/ms535893%28VS.85%29.aspx

• [ Prev ]
• [ Next ]
• [ Up ]
• [ JavaScript ]