multiselect.js ダウンロードページ
デモページ
jquery.multi-select.js の概要
画面からも解るとおり、全体の一覧より( この場合は右側 ) 必要なグループを作成する時に便利なコントロールです。HTML 上で作成するのは、一つの複数選択可能な SELECT 要素のみで、プラグインによって二つのリストボックスを横に並べたようなコントロールを作成してくれます。
OPTION 要素内に selected がある場合に、選択後のデータとして表示されます。それ以外はもう一つの一覧(残り全て)として表示されます。ですから、事前に選択データを用意するという事は、事前に OPTION 要素に selected を指定しておく事と同義です。
表示を JavaScript でリセットしたい場合は、jQuery 等で 元の SELECT 要素の内容を変更しておいて、プラグインの refresh メソッドを使用します
$('#select_item').multiSelect("refresh");
選択済みデータの処理
左側のタイトル部分にあるコンボボックスによって選択されたグループをサーバーから読み出して再表示するようになっています。コンボボックスのイベントでは、location.href に URL をセットしてリロードしています( キャッシュされないように、getTime を使用 )
$("#syozoku").on("change", function(){
location.href = "change.php?scode=" + $(this).val() + "&c="+ (new Date()).getTime();
} );
カスタマイズ処理
クラスとして、ms-selectable と ms-selection があり、ms-selectable が選択するほうのリストボックスです。ですから、ここでは ms-selectable に float:right、ms-selection に float:left を設定して選択を右に持ってきています( デフォルトでは逆 )
また、このクラスを使って選択後のスクロールが表示される要素に対して、scrollTop( 10000 ) を実行して、選択後のスクロールを一番最後まで移動しています。選択後のリストボックスでは、一番最後にデータが追加されるので、デフォルトでは視認できないのでカスタマイズしています
change.php
<?php
require_once("../common.php");
session_start();
header( "Content-Type: text/html; Charset={$_SESSION["charset"]}" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
require_once("dbsetting.php");
if ( $_GET['scode'] == '' ) {
$_GET['scode'] = '0001';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/jquery/plugins/multiselect/jquery.multi-select.js"></script>
<link rel="stylesheet" href="http://winofsql.jp/jquery/plugins/multiselect/multi-select.css" type="text/css" />
<script>
$(function(){
var option1 = "";
var option2 = "";
var option3 = "";
if ( '<?= $_GET['scode'] ?>' == '0001' ) {
option1 = '<option value="0001" selected>';
}
else {
option1 = '<option value="0001">';
}
if ( '<?= $_GET['scode'] ?>' == '0002' ) {
option2 = '<option value="0002" selected>';
}
else {
option2 = '<option value="0002">';
}
if ( '<?= $_GET['scode'] ?>' == '0003' ) {
option3 = '<option value="0003" selected>';
}
else {
option3 = '<option value="0003">';
}
var syozoku = '<div class="header_item"><select id="syozoku" name="syozoku">'+ option1 +'営業部第一</option>'+ option2 +'営業部第ニ</option>'+ option3 +'営業部第三</option></select></div>';
$('#select_item').multiSelect({
cssClass: "select_item",
keepOrder: true,
selectableHeader: "<div class='header_item'>対象社員</div>",
selectionHeader: syozoku,
afterSelect: function(values){
console.log( values[0] )
console.log( "Select:" + $( "#select_item").children( "option[value='"+values+"']" ).text() )
$("#ms-" + "select_item .ms-selection .ms-list").scrollTop(10000);
},
afterDeselect: function(values){
console.log( values[0] )
console.log( "Deselect:" + $( "#select_item").children( "option[value='"+values+"']" ).text() )
}
});
$("#syozoku").on("change", function(){
location.href = "change.php?scode=" + $(this).val() + "&c="+ (new Date()).getTime();
} );
});
</script>
</head>
<body>
<style>
.header_item {
padding: 5px;
text-align: center;
border: solid 1px #ccc;
margin-bottom:2px;
background-color: #eee;
}
.select_item {
width: 600px;
}
.select_item .ms-selectable li.ms-elem-selectable, .select_item .ms-selection li.ms-elem-selection {
padding: 10px;;
}
.select_item ul.ms-list{
height: 300px;
}
/* 左右入れ替え */
.select_item .ms-selectable {
float: right;
}
.select_item .ms-selection {
float: left;
}
select {
font-size: 16px;
}
</style>
<form
method="get"
id="target_form"
target="my_ferame"
action="change_update.php"
accept-charset="utf-8">
<input
type="submit"
name="send"
id="send_check"
value="更新"
style='padding:5px;width:600px;margin-bottom:16px;'>
<select
multiple
id="select_item"
name="select_item[]">
<?php
// -------------------------------------
// コンボボックス内容
// -------------------------------------
$query = <<< QUERY
select * from `社員マスタ`
QUERY;
$result = $connect->query($query);
if ( !$result ) {
die('クエリーに誤りがあります : ' . $connect->error );
}
while ($row = $result->fetch_array(MYSQLI_BOTH)) {
$sentaku = "";
if ( $row["所属"] == $_GET['scode'] ) {
$sentaku = "selected";
}
print <<<DISPLAY
<option value="{$row["社員コード"]}" $sentaku>{$row["氏名"]}</option>
DISPLAY;
}
?>
</select>
</form>
<br>
<iframe
name="my_ferame"
frameborder="1"
scrolling="yes"
width="600"
height="200"></iframe>
</body>
</html>
change_update.php
<?php
session_start();
header( "Content-Type: text/html; Charset={$_SESSION["charset"]}" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
require_once("dbsetting.php");
$list = "";
foreach ($_GET['select_item'] as $scode ) {
if ( $list != "" ) {
$list .= ",";
}
$list .= "'$scode'";
}
$query = <<< QUERY
update `社員マスタ` set
`所属` = '{$_GET['syozoku']}'
,`更新日` = now()
where
`社員コード` in ({$GLOBALS['list']})
QUERY;
//$connect->query($query);
print "<pre>";
print $query;
print "\n---------------------------------\n";
print_r($_GET);
print "</pre>";
?>
関連する記事
jQuery プラグイン : multiselect.js の使用方法とカスタマイズ