▼Select要素からコンボボックスを作成します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jquery.combobox | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.dimensions-1.2.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.combobox.js"></script>
<script type="text/javascript">
$(function() {
$('#officeItemList').combobox({
comboboxContainerClass: "comboboxContainer",
comboboxValueContainerClass: "comboboxValueContainer",
comboboxValueContentClass: "comboboxValueContent",
comboboxDropDownClass: "comboboxDropDownContainer",
comboboxDropDownButtonClass: "comboboxDropDownButton",
comboboxDropDownItemClass: "comboboxItem",
comboboxDropDownItemHoverClass: "comboboxItemHover",
comboboxDropDownGroupItemHeaderClass: "comboboxGroupItemHeader",
comboboxDropDownGroupItemContainerClass: "comboboxGroupItemContainer",
animationType: "slide",
width: "100px"
});
});
</script>
<!-- CSS -->
<style type="text/css">
.comboboxContainer { background-color:#fff; border:1px solid #777; border-right:solid 1px #ccc; border-bottom:solid 1px #ccc; }
.comboboxValueContainer { background:url("/content/img/skin/bg.png") repeat-x left top; }
.comboboxValueContent { padding-left:3px; text-transform:uppercase; }
.comboboxDropDownContainer { border:solid 1px #000; border-left:solid 1px #aaa; border-top:solid 1px #aaa; background:#fff; overflow:hidden; padding-left:3px; }
.comboboxDropDownButton { width:16px; height:18px; background-image:url("/content/img/ajax/image.axd.gif"); }
.comboboxGroupItemHeader { display:block; background:#99cccc; color:#000; }
.comboboxGroupItemContainer { padding-left:10px; }
.comboboxItem { background:#fff; color:#000; text-transform:lowercase; font-weight:normal; font-style:normal; }
.comboboxItemHover { background-color:#999; color:#fff; text-transform:uppercase; padding-left:4px; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://jquery.sanchezsalvador.com/jquery/page/jquerycomboboxexamplealternatestyle.aspx'>jquery.combobox</a> | 設置サンプル</h1>
<p>▼Select要素からコンボボックスを作成します。</p>
<!-- CODE -->
<form action="#" style="margin-bottom:400px;">
<p class="liveexample">
<select id="officeItemList">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<optgroup label="グループA">
<option value="a1">選択肢A-1</option>
<option value="a2">選択肢A-2</option>
<option value="a3">選択肢A-3</option>
</optgroup>
<optgroup label="グループB">
<option value="b1">選択肢B-1</option>
<option value="b2">選択肢B-2</option>
<option value="b3">選択肢B-3</option>
</optgroup>
</select>
</p>
</form>
<!-- / CODE -->
</div>
</body>
</html>