実行結果
設置サンプルのソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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/jqueryMultiSelect.js"></script>
<script type="text/javascript">
$(function() {
// Default options
$("#control_1, #control_3, #control_4, #control_5").multiSelect();
// With callback
$("#control_6").multiSelect( null, function(el) {
$("#callbackResult").show().fadeOut();
});
// Options displayed in comma-separated list
$("#control_7").multiSelect({ oneOrMoreSelected:'*' });
// 'Select All' text changed
$("#control_8").multiSelect({ selectAllText:'Pick ‘em all!' });
// Show test data
$("FORM").submit( function() {
var results = $(this).serialize().replace(/&/g, '\n');
results = decodeURI(results);
alert(results);
return false;
});
});
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/jquery_multiselect/jqueryMultiSelect.css" />
<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>
<!-- CONTENT -->
<h1><a href='http://abeautifulsite.net/notebook.php?article=62'>jQuery MultiSelect</a></h1>
<!-- CODE -->
<form action="/content/demo/test.php" method="post">
<h2>コントロール1：デフォルト</h2>
<p>
<select id="control_1" name="control_1[]" multiple="multiple" size="5">
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
</select>
</p>
<p>IE6だとこのSelect要素が上のSelect要素の上に重なってしまう。<br>
<select id="control_2" name="control_2[]">
<option value="option_1">IE6 TEST</option>
<option value="option_2">IE6 TEST</option>
<option value="option_3">IE6 TEST</option>
<option value="option_4">IE6 TEST</option>
<option value="option_5">IE6 TEST</option>
<option value="option_6">IE6 TEST</option>
<option value="option_7">IE6 TEST</option>
<option value="option_8">IE6 TEST</option>
<option value="option_9">IE6 TEST</option>
<option value="option_10">IE6 TEST</option>
</select>
</p>
<h2>コントロール3, 4, 5：初期値を選択</h2>
<p>
<select id="control_3" name="control_3[]" multiple="multiple" size="5">
<option value=""></option>
<option value="option_1" selected="selected">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
</select>
<select id="control_4" name="control_4[]" multiple="multiple" size="5">
<option value=""></option>
<option value="option_1" selected="selected">Option 1</option>
<option value="option_2" selected="selected">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
</select>
<select id="control_5" name="control_5[]" multiple="multiple" size="5">
<option value=""></option>
<option value="option_1" selected="selected">Option 1</option>
<option value="option_2" selected="selected">Option 2</option>
<option value="option_3" selected="selected">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
</select>
</p>
<h2>コントロール6：コールバック関数あり</h2>
<p>
<select id="control_6" name="control_6[]" multiple="multiple" size="5">
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
</select>
<span id="callbackResult" style="display:none;">Callback triggered!</span>
</p>
<h2>コントロール7：選択された値のテキストをカンマ区切りで連結して表示</h2>
<p>
<select id="control_7" name="control_7[]" multiple="multiple" size="5">
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
</select>
</p>
<h2>コントロール8：「Select All」のテキスト変更</h2>
<p>
<select id="control_8" name="control_8[]" multiple="multiple" size="5">
<option value=""></option>
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
</select>
</p>
<p>
<input type="submit" value="結果表示" />
</p>
</form>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>