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>
分享到:
相关推荐
只需指定表单元素ID和一些选项,Prototype会自动处理表单的提交过程: ```javascript $('myForm').observe('submit', function(event) { new Ajax.Request(this.action, { method: this.method, parameters: ...
`Form.Element`提供了对表单元素的便捷操作,如获取或设置值,而`Form`类则用于处理整个表单。例如,你可以使用`Form.Element.serialize`方法来序列化表单的所有数据,准备发送到服务器。 ```javascript var ...
### Prototype使用学习...通过这些函数,我们可以轻松地操作DOM元素、处理表单数据以及执行AJAX请求等,极大地提高了前端开发效率。希望本手册能帮助您更好地理解和运用Prototype.js,提升Web应用的交互性和用户体验。
此外,`Form.Element`和`Form`类提供了表单相关的便捷操作,如发送表单数据到服务器。 4. **Event处理** Prototype改进了事件处理机制,提供了`Event.observe()`和`Event.stop()`等方法,使得事件监听和阻止默认...
例如,`Element` 对象提供了大量操作DOM元素的方法,`Form` 和 `Form.Element` 对象则简化了表单元素的处理,还有 `Ajax` 对象及其子类用于实现Ajax交互。 Prototype.js 的核心理念是提升JavaScript的开发体验,...
Prototype框架是JavaScript编程中的一种流行库,主要用于简化DOM操作、事件处理、Ajax交互以及对象创建。这个框架由Sam Stephenson于2005年创建,是早期JavaScript开发者的常用工具,尤其是在构建动态Web应用程序时...
2. DOM操作:Prototype提供$(选择器)、$$(选择多个元素)等方法,简化DOM元素的选取和操作。 3. 事件处理:使用Event.observe和Event.stop方法可以方便地监听和处理用户事件。 三、表单验证 表单验证是确保用户...
2. **Element和Form Methods**:提供了一系列直接操作DOM元素和表单的方法,如`Element.hide()` 隐藏元素,`Form.serialize()` 序列化表单数据。 3. **Ajax组件**:`Ajax.Base` 是所有Ajax操作的基础,`Ajax....
表单元素本身也会扩展,包括 `Form.Methods` 对象中的方法。这些方法中的大多数会返回原始元素,因此可以方便地链接多个方法,如: ```javascript $(myElement).update("updated").show(); ``` 值得注意的是,不仅...
Prototype库还包括Element对象,用于操作DOM元素;Abstract类和Abstract.Insertion,提供了插入元素的抽象方法;各种Insertion子类,如Before、Top、Bottom和After,方便在元素周围插入内容;Field和Form对象,处理...
此外,Prototype还定义了如PeriodicalExecutor这样的定时执行器,以及Element、Field、Form、Form.Element等相关对象,用于处理DOM元素、表单和表单元素的操作。各种Observer类则支持事件监听和处理。 总结起来,...
在页面自动提交的场景中,我们可能需要利用Prototype提供的`Form.Element`和`Form.Methods`模块,它们提供了对表单元素和表单提交方式的高级控制。 1. **表单元素操作**:Prototype通过`Form.Element`模块增强了...
其次,Prototype对DOM(文档对象模型)的操作进行了优化,提供了简洁的API,使得开发者可以轻松地查找、创建、修改和删除DOM元素。手册将详细介绍`$`函数、`$$`函数以及`Element`对象的各种方法,如`insert`、`...
2. **DOM操作**:Prototype提供了一套简化的DOM(Document Object Model)操作接口,如`Element.extend()`、`Element.hide()`和`Element.show()`,使得操作HTML元素更加方便。 3. **Ajax**:Prototype中的`Ajax`...
通过Prototype,可以更轻松地处理DOM操作、事件处理和Ajax通信。 1.2. 关联文章 在学习Prototype时,可以参考高级JavaScript指南等关联文章,以深入理解JavaScript的基础知识和高级特性,这将有助于更好地利用...
2. **DOM操作**:Prototype 提供了一套简洁的DOM操作API,如 `$()` 函数可以快速选择元素,`Element.extend()` 可以为元素添加自定义方法,`Element.hide()` 和 `Element.show()` 用于显示和隐藏元素。 3. **Ajax...
在JavaScript的世界里,Prototype是一个非常著名的库,它扩展了JavaScript的基本对象,并且提供了一系列实用的函数,使得开发者在处理DOM操作、AJAX交互等方面的工作变得更加简单。本案例将重点探讨如何利用...
`Form`模块专注于表单元素的操作,提供了丰富的功能来控制和获取表单数据: - **`disable(formElement)`**:禁用表单元素。 - **`enable(formElement)`**:启用表单元素。 - **`findFirstElement(formElement)`**:...
Form.Element.EventObserver类用于观察一个表单元素的事件。 2.35. Form.EventObserver 类 Form.EventObserver类用于观察一个表单的事件。 2.36. Position 对象 Position对象用于表示一个元素的位置。 ...