zoukankan html css js c++ java

select效果联动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>My JSP 'mylist_liti.jsp' starting page</title>
    <script language="javascript">

 var cateArray = new Array();

  cateArray[cateArray.length]=new Array("1","新能源");
  cateArray[cateArray.length]=new Array("2","自然吸气发动机");
  
 var titleArray = new Array();

  titleArray[titleArray.length]=new Array("1","1","续航里程");
   
  titleArray[titleArray.length]=new Array("2","2","排量");


 function setTitle(obj1ID,obj2ID){
        var objCate = document.getElementById(obj1ID);
        var objTitle = document.getElementById(obj2ID);
        var i;
        var itemArray = null;
        if(objCate.value.length > 0){
             itemArray = new Array();
             for(i=0;i<titleArray.length;i++){
                if(titleArray[i][0]==objCate.value){
                    itemArray[itemArray.length]=new Array(titleArray[i][1],titleArray[i][2]);
                }
             }
        }
        for(i = objTitle.options.length ; i >= 0 ; i--){
                objTitle.options[i] = null;
        }
        objTitle.options[0] = new Option("请选择职称");
        objTitle.options[0].value = "";
        if(itemArray != null){
                for(i = 0 ; i < itemArray.length; i++){
                        objTitle.options[i+1] = new Option(itemArray[i][1]);
                        if(itemArray[i][0] != null){
                           objTitle.options[i].value = itemArray[i][0];
                        }
                }
        }

   } 
</script>
    </head>

    <body
        style="background: url(${ctx }/images/iframe_bg.gif) repeat-x; margin: 2px;">

    

        <div id="create"
            style="border: 1px solid #84a1bd; margin: 10px 250px; ">
            <form name="createForm"
                action="${ctx}/sys/tea.do?method=createTea" method="post">
                <table width="60%" align="center" cellpadding="0" cellspacing="0"
                    style="font-size: 13px;">
                    
                    
                    <tr>
                        <td align="center" width="28%" height="30">
                            职称类型
                        </td>
                        <td align="left">
                            &nbsp;&nbsp;
                            <select name="cateid" id="cateid" onChange="setTitle('cateid','titleid')">
                                 <option value="">请选职称类型</option>
                                <option value="1" >
                                    新能源
                                </option>
                                <option value="2">
                                    自然吸气发动机
                                </option>
                            </select>

                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="28%" height="30">
                            职 &nbsp;&nbsp;&nbsp;&nbsp;称
                        </td>
                        <td align="left">
                            &nbsp;&nbsp;
                            <select name="title" id="titleid">
                                <option value="暂无">
                                    请选职称
                                </option>
                            </select>

                        </td>
                    </tr>
                    
                </table>
            </form>
        </div>

        <br />
    </body>
</html>

在select联动中使用了调用了onChange的方法，其中设置了array进行级联显示

显示效果

2017-04-19

查看全文

相关阅读:
.htaccess 文件不起作用？| （Apache Rewrite）
Putty 如何解决中文乱码（笔记）
如何删除鼠标右键“发送到”的多余项
 开发环境搭建笔记
 Javascript String 包
 第十五章：使用canvas绘图
 慕课css3 2章边框和3章颜色相关
 第5章引用类型
 第一章 JavaScript简介
 第五章引用类型（Object类型、Array类型）

原文地址：https://www.cnblogs.com/itcx1213/p/6734148.html