動作環境
◇ 言語:JavaScript(jQuery)
◇ ライセンス:MIT
デモはこちら
。
通常の表示例及びJQuery Narrative Select Pluginで適応される表示例

選択時

また、表示はCSSで制御されているため、CSSを修正すれば、別のインタフェースに変わることも簡単にできます。
使い方
<!-- CSS -->
<style type="text/css">
@import url("/path/to/jquery.narrativeselect/jquery.narrativeselect.css");
</style>
<!-- JS -->
<script type="text/javascript" src="/path/to/jquery.latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.narrativeselect.js"></script>
<script type="text/javascript">
//--<![CDATA[
$("select").narrativeselect();
//--]]>
</script>
HTML定義例:
<select>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010" selected="selected">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
</select>
.