Biz∫でselectタグが使用したい

jQuery Biz∫

Biz∫（http://biz-integral.com/）でアプリケーションを作成する場合、フロント側の画面作成にはマスカットを使用します。デフォルトではいくつかの部品（ボタンやテキストボックス、グリッドなど）が提供されているのですが、HTMLタグのSELECTがありませんでした。他の部品としてコンボボックスやチェックボックスなどがあるので、他の部品を使用することで業務要件を実現できますので大した問題にはなりません。今後は利用者側（利用者側といってもSIerですが。。。）で部品をプラグインする方向に、なるのかなぁ〜ならないのかなぁ〜といった状況です。ただマスカットの拡張で済む話であれば、先日のエントリーの要領でできるはず。。。ということでjQueryのプラグインに挑戦ということで、SELECT部品を作ってみました。
jSelect.js

(function(){
	jQuery.fn.jselect = function(options){
		options = jQuery.extend({
			inputs: [ {label:"input", key:"input"}],
			id   : "input",
			size : "input",
			width: "input",
			multi: "input"
		},options);

		var form = document.createElement("select");
		this.append(form);
		form.id = options.id;
		form.size = options.size;
		if( options.width != undefined && options.width != "input" ){
			$("#" + options.id).css('width', options.width );
		}
		if( options.multi != undefined && options.multi != "input" ){
			$("#" + options.id).attr("multiple","multiple");
		}
		for( var i=0; i < options.inputs.length; i++ ){
			var opt = $(document.createElement("option"));
			opt.text( options.inputs[i].label );
			opt.val( options.inputs[i].key );
			$("#" + options.id).append(opt);
		}
		$.fn.extend({
			getKeyValue : function(){
			
				var ret = new Array();
				$("option").each(function(){
					var mem = { label:$(this).text(), key:$(this).val() };
					ret.push( mem );
				});
				return ret;
			},
			
			setKeyValue : function( inputs ){
				for( var i=0; i < inputs.length; i++ ){
					var opt = $(document.createElement("option"));
					opt.text( inputs[i].label );
					opt.val( inputs[i].key );
					$("#" + options.id ).append(opt);
				}
			},

			getSelectedValue : function(){
			
				var ret = new Array();
				$(":selected").each(function(){
					var mem = { label:$(this).text(), key:$(this).val() };
					ret.push( mem );
				});
				return ret;
			},
			
			removeAll : function(){
				$("option").each(function(){
					$(this).remove();
				});
			}
		});
	};

})(jQuery);

jSelectを利用する側(html)

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>sample</title>
		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="jSelect.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			var opt1 = [
				{label:"aaaaaa", key:"value01"},
				{label:"bbbbbb", key:"value02"},
				{label:"cccccc", key:"value03"}
			];
			$("#msg").jselect({inputs:opt1, id:"hoge", size:4 , width:200, multi:"multi" });
		});
		function onSetKeyValue(){
			var opt1 = [
				{label:"aaaaaa", key:"value01"},
				{label:"bbbbbb", key:"value02"},
				{label:"cccccc", key:"value03"}
			];
			$("jselect").setKeyValue(opt1);
		}
		function onGetSelectedValue(){
			var arr = $("jselect").getSelectedValue();
			for(var i=0; i<arr.length; i++){
				alert("key="+arr[i].key+",label="+arr[i].label);
			}
		}
		function onGetKeyValue(){
			var arr = $("jselect").getKeyValue();
			for(var i=0; i<arr.length; i++){
				alert("key="+arr[i].key+",label="+arr[i].label);
			}
		}
		function onRemoveAll(){
			$("jselect").removeAll();
		}
		</script>
	</head>
	<body>
		<H1>サンプルページ</H1>
		<div id="msg"></div>
		<input type="button" onClick="onGetKeyValue()" value="getKeyValue"></input>
		<input type="button" onClick="onSetKeyValue()" value="setKeyValue"></input>
		<input type="button" onClick="onGetSelectedValue()" value="getSelectedValue"></input>
		<input type="button" onClick="onRemoveAll()" value="removeAll"></input>
	</body>
</html>

イメージ

ちなみに、jQueryのプラグインはhttp://plugins.jquery.com/で検索をして重複していない名前かどうかをチェックしたのちに公開という手順となっているようです。
今回の私のサンプルは公開目的ではないので重複していても関係ないのですが、気になったので検索してみました。
ほほう、ありました。http://plugins.jquery.com/node/7056
今回は主に検証目的で作成してみましたが、複雑な部品になるとテストが大変だなと思いました。業務でやるなら専用部隊が必要でしょうね〜。