prototype.jsでコンボボックスの連動

VB Tips And Sample(HOME)VBプログラマの為のAjax入門

rototype.jsでコンボボックスの連動

要は、javascriptで

  • コンボの選択が変更された事を察知。
  • 既存のコンボボックスの値を消去。
  • 変更された値に応じて中身をセット。
ができれば完成。
変更はonchangeで拾えます。
後は実際のソースを見ていただいたほうが早い。

Aコントロール:
Bコントロール:
javascript
			function s_change(){
				
				OptionDelete(); //消す	
			
				id = $('select1').value;//valueの値を取得
				//alert(id);  //デバグ用
				
				//連想配列を作成
				//var arryVB={vb1:'VB1',vb2:'VB2',vb3:'VB3',vb4:'VB4',vb5:'VB5',vb6:'VB6'};	
				//var arryJS={js1:'JS1',js2:"JS2",js3:"JS3",js4:"JS4",js5:'JS5',js6:'JS6'};
				
				//配列を作成
				var arryVB=['VB1','VB2','VB3','VB4','VB5','VB6'];	
				var arryJS=['JS1','JS2','JS3','JS4','JS5','JS6'];	
				
				switch (id) {
					case "vb":
						var x=0;
						for (x=$('select2').length; x <= arryVB.length-1; x++){
							$('select2').options[x] =new Option(arryVB[x],arryVB[x]);
						}		
						break;			
					case "js":
						var x=0;
						for (x=$('select2').length; x <= arryJS.length-1; x++){
							$('select2').options[x] =new Option(arryJS[x],arryJS[x]);
						}
						break;	
				}
			
			}
			
			//オプションの中身を削除する
			function OptionDelete(){
			
				var select = $('select2');	
				var options = select.options;
				for (var i = options.length - 1; 0 <= i; --i) {
					$('select2').options[i]=null;
				}
			
			}

		
	

VB Tips And Sample(HOME)VBプログラマの為のAjax入門