SQLの窓

2015年11月13日


jQuery : 一つの 複数選択の SELECT 要素から二つのリストボックスを作成して、必要なグループ選択するプラグイン / multiselect.js と PHP との連携

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 の使用方法とカスタマイズ



【IFRAME パッケージの最新記事】
posted by lightbox at 2015-11-13 15:09 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり