実行結果
設置サンプルのソース
<!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>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" href="/content/lib/jquery/dropkick/dropkick.css" type="text/css">
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/content/lib/jquery/easy_select_box-1.0.1/easyselectbox.min.js"></script>
<script type="text/javascript" charset="utf-8">
var foods={
"fruits":{
},
}
$(function () {
$('#vegitables').easySelectBox();
$('#fruits').easySelectBox({speed:100});
$('form').live('submit', function (e) {
var results = $(this).find('.results');
console.log(results);
results.html($(this).serialize());
return false;
});
});
</script>
<!-- CSS -->
<style type="text/css">
/* Easy Select Box */
ul, li {
list-style:none;
margin:0; padding:0;
}
.easy-select-box {
position:relative;
display:inline-block;
width:118px;
font-size:11px;
color:#0c2245;
}
.easy-select-box .easy-select-box-disp,
.easy-select-box .easy-select-box-disp:visited{
background: url("/content/lib/jquery/easy_select_box-1.0.1/bg-select-1.png") no-repeat 0 0;
display:block;
color:#0c2245;
padding:0 3px;
height:18px;
line-height:18px;
text-decoration:none;
}
.easy-select-box .easy-select-box-disp:hover{
position:relative;
background-position: 0 -18px;
text-decoration:none;
}
.easy-select-box ul {
position:absolute;
top:100%;
left:0;
border:1px solid #cccccc;
display:none;
z-index:99;
width:116px;
max-height:200px;
overflow:auto;
background:#FFFFFF;
}
.easy-select-box ul li a,
.easy-select-box ul li a:visited{
padding:3px;
background:#FFFFFF;
display:block;
color:#0c2245;
cursor:default;
text-decoration:none;
}
.easy-select-box ul li a:hover{
background:#3399ff;
color:#FFFFFF;
text-decoration:none;
}
</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">
<p>参照:<a href='http://www.codefleet.com/easy-select-box/' target='_blank'>EASY SELECT BOX</a></p>
<!-- CODE -->
<form id="form1" method="post" action="#">
<p>
<label for="vegitables">やさい:</label>
<select name="vegitables" id="vegitables">
<option value="0">▼選択してください</option>
<option value="potato">ジャガイモ</option>
<option value="carrot">ニンジン</option>
</select>
<label for="fruits">フルーツ:</label>
<select name="fruits" id="fruits">
<option value="0">▼選択してください</option>
<option value="lemon">レモン</option>
<option value="strawberry">イチゴ</option>
<option value="watermelon">スイカ</option>
<option value="banana">バナナ</option>
<option value="orange">オレンジ</option>
<option value="apple">リンゴ</option>
</select>
</p>
<p>
<input type="submit" name="submit" value="送信される値を確認" tabindex="6">
<code class="results"></code>
</p>
</form>
<!-- / CODE -->
</div>
</body>
</html>