zoukankan      html  css  js  c++  java
  • 动态生成选择项目

    在html中,会有

    <select id="grade">
    <option>所有年级</option>
    </select>

    其中选择项需要从数据库里取出之后动态的加入到其中。这时,可以用js来实现。

    document.getElementById("grade").options.add(new Option(str1,str2)); 

    Option是 select 中的选择项,str1 是页面中看到的描述,而str2是这一项的值,比如<option value="这里是str2">这里是str1</option>

    new option()一般用在动态生成选择项目。

    在select之间传递数据可以使用  onchange()函数

    //动态删除select中的所有options:   document.getElementById("major").options.length=0;   

    //动态删除select中的某一项option: document.getElementById("major").options.remove(index);

    实例:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     2 <html>
     3   <head>
     4     <base href="<%=basePath%>">
     5     
     6     <title>My JSP 'index.jsp' starting page</title>
     7     <meta http-equiv="pragma" content="no-cache">
     8     <meta http-equiv="cache-control" content="no-cache">
     9     <meta http-equiv="expires" content="0">    
    10     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    11     <meta http-equiv="description" content="This is my page">
    12     <script src="js/jquery-1.9.1.js"></script>
    13     <script src="js/json.js"></script>
    14     <script type="text/javascript">
    15     $(function() {
    16             $.ajax({
    17             type: "POST",
    18             url: "getCollege.action",
    19             dateType: "json",
    20             async : false,
    21             data: {},
    22             success: function(data,status){        
    23                 $.each(data.collegeList,function(i,n){ 
    24                 
    25                      document.getElementById("college").options.add(new Option(n.name,n.id));         
    26                 
    27                 });
    28             },//end of success
    29             error:function (XMLHttpRequest, textStatus, errorThrown)
    30              {
    31                 alert("加载学院信息出现错误,请重新加载。");
    32             }      
    33          });
    34     
    35     });
    36     
    37     function getMajors(collegeId){
    38     
    39        $.ajax({
    40             type: "POST",
    41             url: "getMajor.action",
    42             dateType: "json",
    43             async : false,
    44             data: {"collegeId":collegeId},
    45             success: function(data,status){    
    46             
    47                 document.getElementById("major").options.length=0;   
    48                 document.getElementById("major").options.add(new Option("所有专业")); 
    49                
    50                 $.each(data.majorList,function(i,n){ 
    51                   
    52                      document.getElementById("major").options.add(new Option(n.name,n.id));         
    53                 
    54                 });
    55             },//end of success
    56             error:function (XMLHttpRequest, textStatus, errorThrown)
    57              {
    58                 alert("加载专业信息出现错误,请重新加载。");
    59             }      
    60          });
    61     
    62     }
    63     
    64     </script>
    65   </head>
    66   
    67   <body>
    68   <form action="test.action">
    69        <select id="college" onchange=getMajors(this.value)>
    70             <option>全校</option>
    71         </select>
    72         <select id="major">
    73             <option>所有专业</option>
    74         </select>
    75         <input type="submit" value="提交" />
    76     </form>
    77   </body>
    78 </html>
    View Code
  • 相关阅读:
    PowerShell2.0之Windows排错(二)查看服务依存性
    PowerShell2.0之桌面计算机维护(八)关闭或重启远程计算机
    PowerShell2.0之桌面计算机维护(九)磁盘管理
    PowerShell2.0之桌面计算机维护(五)管理桌面电源设置
    PowerShell2.0之桌面计算机维护(四)审核安全的屏幕保护程序
    PowerShell2.0之桌面计算机维护(七)性能计数器
    PowerShell2.0之Windows排错(三) 检查设备驱动
    Nacos服务分级存储模型、集群、负载均衡
    Nacos安装
    Nacos注册中心之搭建工程
  • 原文地址:https://www.cnblogs.com/dobestself-994395/p/4265229.html
Copyright © 2011-2022 走看看