JavaScript select 级联操作

   var s1=    document.getElementById("s1") ;
    var s2=   document.getElementById("s2") ;
    var schoolTerm =["第一学期","第二学期","第三学期","第四学期","第五学期"];
    var content=[
        ["html","css","javascript" ] ,  ["c","c++" ],
        ["mysql","oracle"] ,   ["java" ],
        ["jqury","bootstrap","css3","HTML5"  ]
    ];
    //初始化
   for( var i=0; i<schoolTerm.length ;i++){
       s1.add(new Option( schoolTerm[i],schoolTerm[i])  ,null);
   }
    for( var i=0; i<content[0].length ;i++){
        s2.add(new Option(content[0][i],content[0][i])  ,null);
    }
    /* 选择 */
    s1.onchange = function(){
        var index =   s1.selectedIndex ;
        s2.innerHTML ="";
        for( var i=0; i<content[index].length ;i++){
            s2.add(new Option(content[index][i],content[index][i])  ,null);
        }
    };

  

<select name="s1" id="s1">

</select>

<select name="s2" id="s2">

</select>

  

时间: 2024-10-07 07:59:03

JavaScript select 级联操作的相关文章

jqery对于select级联操作

问题:今天在做一个需求的时候,有一个级联操作也就是选中下拉框的一列就显示对对应的数据 处理:我在做级联的时候在option的列里面绑定click的事件发现这个事件行不通:查资料发现select触发的是change事件.代码如下图所示: 通过select这个节点的val获取一个id值再通过id值进行判断就能很好的解决这种问题了. 以下内容转自网络以便学习 总结: jqery对select的常用操作: jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id

省市级联操作

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title&

jQuery实现select级联

使用Html5的数据属性(data-*)Map级联关系,代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Select级联</title> 5 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 6 <script type=text/javascript>

Hibernate级联操作解密(inverse和cascade)

总结: Cascade:对级联操作进行限制,有如下几个参数: all : 所有情况下均进行关联操作.  none:所有情况下均不进行关联操作.这是默认值.  save-update:在执行save/update/saveOrUpdate时进行关联操作.  delete:在执行delete时进行关联操作. Inverse:在一对多模型中,只能在一的一方设置,inverse的作用就是在级联发生后,会再次更新子表数据的外键为主表的主键.确保子表外键不会为空. 下面演示一个班级学生的例子(一对多): 班

Python之路day13 web 前端(JavaScript,DOM操作)

参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容回顾: 1. HTML标签 html/head/body/ input div,span a p br span table > tr行 th表头列 td表头列 h form> action method enctype=;;; select option input系列: text passwo

oracle级联操作

在添加foreing key约束时,还可以指定级联操作的类型,主要用于确定当删除(on delete) 附表中的一条记录时,如何处理子表中的外键字段,有如下三种引用类型. cascade此关键字用于表示当删除主表中被引用列的数据时,将子表中相应应用列的值置为null值,这种情况要求子表中的引用列支持null值set null此关键字用于当删除主表中被引用列的数据时,将子表中相应引用列的值设置为null值.这种情况要求子表中的应用列支持null值.not action此关键字用于表示当删除主表中被

Oracle 12C -- truncate的级联操作

在之前的版本中,存在外键约束时,无法直接truncate父表.在12C中,对truncate操作添加了级联操作特性. 前提是创建外键约束时,使用了"on delete casacde". 测试脚本: SQL> drop table child; SQL> drop table parent; SQL> create table parent(id number primary key); SQL> create table child(cid number pr

作用JavaScript访问和操作数据库

JS操作 Access 数据库 Js代码   <SCRIPT LANGUAGE="JavaScript"> <!-- var filePath = location.href.substring(0, location.href.indexOf("实例197.连接Access数据库.html"));    //以当前页面文件为基础,找到文件所在的绝对路径 var path = filePath + "197.mdb"; path

关于select中操作,以及js前台计算,span简单操作

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset =utf-8"> <title>js获取数据</title> </head> <body> <span id="s1">111</span><br