`
zccst
  • 浏览: 3315998 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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简化Ajax操作

    只需指定表单元素ID和一些选项,Prototype会自动处理表单的提交过程: ```javascript $('myForm').observe('submit', function(event) { new Ajax.Request(this.action, { method: this.method, parameters: ...

    prototype -通过js提交表单,局部刷新不跳转

    `Form.Element`提供了对表单元素的便捷操作,如获取或设置值,而`Form`类则用于处理整个表单。例如,你可以使用`Form.Element.serialize`方法来序列化表单的所有数据,准备发送到服务器。 ```javascript var ...

    Prototype使用学习手册指南

    ### Prototype使用学习...通过这些函数,我们可以轻松地操作DOM元素、处理表单数据以及执行AJAX请求等,极大地提高了前端开发效率。希望本手册能帮助您更好地理解和运用Prototype.js,提升Web应用的交互性和用户体验。

    prototype1.7.zip

    此外,`Form.Element`和`Form`类提供了表单相关的便捷操作,如发送表单数据到服务器。 4. **Event处理** Prototype改进了事件处理机制,提供了`Event.observe()`和`Event.stop()`等方法,使得事件监听和阻止默认...

    prototype开发笔记.doc

    例如,`Element` 对象提供了大量操作DOM元素的方法,`Form` 和 `Form.Element` 对象则简化了表单元素的处理,还有 `Ajax` 对象及其子类用于实现Ajax交互。 Prototype.js 的核心理念是提升JavaScript的开发体验,...

    prototype框架

    Prototype框架是JavaScript编程中的一种流行库,主要用于简化DOM操作、事件处理、Ajax交互以及对象创建。这个框架由Sam Stephenson于2005年创建,是早期JavaScript开发者的常用工具,尤其是在构建动态Web应用程序时...

    Ajax最全页面验证-基本prototype框架

    2. DOM操作:Prototype提供$(选择器)、$$(选择多个元素)等方法,简化DOM元素的选取和操作。 3. 事件处理:使用Event.observe和Event.stop方法可以方便地监听和处理用户事件。 三、表单验证 表单验证是确保用户...

    prototype.js中文手册

    2. **Element和Form Methods**:提供了一系列直接操作DOM元素和表单的方法,如`Element.hide()` 隐藏元素,`Form.serialize()` 序列化表单数据。 3. **Ajax组件**:`Ajax.Base` 是所有Ajax操作的基础,`Ajax....

    JavaScript框架高级编程(第一章扩展和增强DOM元素 )

    表单元素本身也会扩展,包括 `Form.Methods` 对象中的方法。这些方法中的大多数会返回原始元素,因此可以方便地链接多个方法,如: ```javascript $(myElement).update("updated").show(); ``` 值得注意的是,不仅...

    prototype.js开发手册.pdf

    Prototype库还包括Element对象,用于操作DOM元素;Abstract类和Abstract.Insertion,提供了插入元素的抽象方法;各种Insertion子类,如Before、Top、Bottom和After,方便在元素周围插入内容;Field和Form对象,处理...

    Prototype开发笔记.doc

    此外,Prototype还定义了如PeriodicalExecutor这样的定时执行器,以及Element、Field、Form、Form.Element等相关对象,用于处理DOM元素、表单和表单元素的操作。各种Observer类则支持事件监听和处理。 总结起来,...

    用prototype实现页面自动提交

    在页面自动提交的场景中,我们可能需要利用Prototype提供的`Form.Element`和`Form.Methods`模块,它们提供了对表单元素和表单提交方式的高级控制。 1. **表单元素操作**:Prototype通过`Form.Element`模块增强了...

    prototype 1.4 开发者手册(中文PDF)

    其次,Prototype对DOM(文档对象模型)的操作进行了优化,提供了简洁的API,使得开发者可以轻松地查找、创建、修改和删除DOM元素。手册将详细介绍`$`函数、`$$`函数以及`Element`对象的各种方法,如`insert`、`...

    Ajax实战:Prototype与Scriptaculous篇pdf

    2. **DOM操作**:Prototype提供了一套简化的DOM(Document Object Model)操作接口,如`Element.extend()`、`Element.hide()`和`Element.show()`,使得操作HTML元素更加方便。 3. **Ajax**:Prototype中的`Ajax`...

    prototype.js 说明文档.doc

    通过Prototype,可以更轻松地处理DOM操作、事件处理和Ajax通信。 1.2. 关联文章 在学习Prototype时,可以参考高级JavaScript指南等关联文章,以深入理解JavaScript的基础知识和高级特性,这将有助于更好地利用...

    Prototype-1.6.0.2

    2. **DOM操作**:Prototype 提供了一套简洁的DOM操作API,如 `$()` 函数可以快速选择元素,`Element.extend()` 可以为元素添加自定义方法,`Element.hide()` 和 `Element.show()` 用于显示和隐藏元素。 3. **Ajax...

    prototype-AJAX案例

    在JavaScript的世界里,Prototype是一个非常著名的库,它扩展了JavaScript的基本对象,并且提供了一系列实用的函数,使得开发者在处理DOM操作、AJAX交互等方面的工作变得更加简单。本案例将重点探讨如何利用...

    prototype手册1.6.0.2版本

    `Form`模块专注于表单元素的操作,提供了丰富的功能来控制和获取表单数据: - **`disable(formElement)`**:禁用表单元素。 - **`enable(formElement)`**:启用表单元素。 - **`findFirstElement(formElement)`**:...

    prototype.js开发笔记.pdf

    Form.Element.EventObserver类用于观察一个表单元素的事件。 2.35. Form.EventObserver 类 Form.EventObserver类用于观察一个表单的事件。 2.36. Position 对象 Position对象用于表示一个元素的位置。 ...

Global site tag (gtag.js) - Google Analytics