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