select效果联动

时间：2023-03-09 05:48:32
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进行级联显示

显示效果

select效果联动

2017-04-19

相关文章