<!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

select效果联动的更多相关文章

  1. jQuery实现select三级联动

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  2. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

  3. jquery实现select二级联动

    jquery实现一个简单的select二级联动菜单,代码如下 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  4. 利用jquery模拟select效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jQuery 1.3.2 简单实现select二级联动

    jQuery 1.3.2 简单实现select二级联动  复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  6. C# select的联动效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head&g ...

  7. js模仿ios select效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

  8. JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法（让你真正理解ajax）

    ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载 ...

  9. select省市联动选择城市 asp.net mvc4

    本文在 http://www.cnblogs.com/darrenji/p/3606703.html(感谢博主的分享)基础上加入全国各省市,从文件中读取全国省市县,组成省市联动的选择标签 在Model ...

随机推荐

  1. 有关html，css,js,less的使用规范

    写前端写久了,规则跟着开发的项目走,突然觉得是不是该总结总结前端的语言使用规则,看到下面这篇还不错,就直接链接过来了哦 http://zhibimo.com/read/Ashu/front-end-s ...

  2. 多个Activity交互的生命周期：

    一.多个Activity交互的生命周期: A Activity打开B Activity的时候:        A Activity                    B Activity     ...

  3. Yii2 Pjax 与 ActionForm ，不刷新提交数据

    <?php yii\widgets\Pjax::begin(['id'=>'phoneDetail']);?> <?php $form = ActiveForm::begin( ...

  4. cordova原理与插件制作

    ---恢复内容开始--- cordova插件打包教程: http://www.jianshu.com/p/96855e009e95 www.itnose.net/detail/6245407.html ...

  5. 使用jQuery监听扫码枪输入并禁止手动输入的实现方法

    @(知识点总结)[jquery|扫码抢] 基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展. 一.功能需求 使用扫码枪扫描条 ...

  6. php人员权限管理(RBAC)

    在说权限管理前,应该先知道权限管理要有哪些功能: (1).用户只能访问,指定的控制器,指定的方法 (2).用户可以存在于多个用户组里 (3).用户组可以选择,指定的控制器,指定的方法  (4).可以添 ...

  7. Excel制作多选下拉框代码以及图示

    1.首先  点击Sheet1(需要显示多选框的页) ,然后右键查看代码,进入编辑界面 2.写入如下代码 Private Sub Worksheet_SelectionChange(ByVal Targ ...

  8. linux—find常见指令用法示例

    Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强da的功能,所以它的选项也很多,其中大部分选项都值得我们花 ...

  9. shell 处理 文件名本身带星号的情况

    获取到的所有文件名放到数组中时必须加上引号,不然 for 循环时会被解析成通配符,或者使用 shell 字典,同样也需要引号. shell 字典示例 #!/bin/bash echo "sh ...

  10. sub,dl,dt,排版,横向滚动条,浮动元素居中，box-sizing

    1.sub标签 下标 2.dl,dt,dd用的地方通常是具有标题,而标题下对应有若干列表简单的(栏目标题+对应标题列表)和标题对应下面有内容.在使用时候我们能简洁html代码情况下,学会灵活使用dl ...