prototype dom操作(新增或删除FORM表单元素)

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;
				}
			
			}








<script type="text/javascript">
//二级联动
Event.observe(window, 'load', function() { 
	Event.observe('alarm_type', 'change', resetOption);
	resetOption();
}); 
function resetOption(){
	{% autoescape off %}
	var orginals = {{AIDC_FILTER_ALARM_TYPE_LIST}} ;
	{% endautoescape %}
	var alarm_type = $("alarm_type").getValue();
	for(var i in  orginals){
		for(var key in orginals[i]){
			if(key == alarm_type){
				var subObjs = orginals[i][key]
				resetOption2(subObjs);
			}
		}
	}
}
function resetOption2(subObjs){
	var arr = [];
	for(var j in subObjs){
		for(var name in subObjs[j]){
			if(subObjs[j].hasOwnProperty(name)){
				arr.push(name);
			}
		}
	}
	//delete old
	var options = $('sub_alarm_type').options;
	for(var index_d = options.length; index_d >=0; index_d--){
		$('sub_alarm_type').options[index_d] = null;
	}
	//add new
	for(var index = 0; index < arr.length; index++){
		$('sub_alarm_type').options[index] =new Option(arr[index],arr[index]);
	}
}

</script>



<select id="alarm_type" name="alarm_type">
                            {% for alarm_type in AIDC_FILTER_ALARM_TYPE_LIST %}
                                {% for key, value in alarm_type.items %}
                                <option value="{{ key }}">{{ key }}</option>
                                {% endfor %}
                            {% endfor %}
                        </select>
                        -<select id="sub_alarm_type" name="sub_alarm_type"></select>






你可能感兴趣的:(prototype)