<!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. 微信开源PHP商城系统一处blind xxe（无需登录，附POC）

    测试版本wemall 3.3 下载地址 http://git.oschina.net/einsqing/wemall/repository/archive?ref=master 需要开源中国的账号 c ...

  2. 1637: [Usaco2007 Mar]Balanced Lineup

    1637: [Usaco2007 Mar]Balanced Lineup Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 393  Solved: 263[ ...

  3. 在Pypi上发布自己的Python包

    使用Python编程的都知道,Python的包安装非常的方便,一般都是可以pip来安装搞定: sudo pip install <package name> pip的安装请移步:https ...

  4. Microsoft Visual Studio 2017 安装过程

    工欲善其事必先利其器 Visual Studio 2017 正式版官方下载地址:https://www.visualstudio.com/downloads/ 安装vs2017的时候最好关闭已打开的v ...

  5. 浅谈jquery插件开发模式

    首先根据<jQuery高级编程>的描述来看,jQuery插件开发方式主要有三种: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget ...

  6. frameset标签设计页面

    重要事项:不能将 <frameset></frameset> 标签放在<body></body> 标签里.且 HTML5 已经不支持 frameset ...

  7. Tomcat+Eclipse乱码问题解决方法

    概述 乱码问题是大家在日常开发过程中经常会遇到的问题,由于各自环境的不同,解决起来也费时费力,本文主要介绍一般性乱码问题的解决方法与步骤,开发工具采用Eclipse+Tomcat,统一设置项目编码UT ...

  8. java学习(二)多态中成员变量详解

    今天我总结了一下java多态中成员变量的赋值与调用 举一个我当初做过的小案例: class Fu{ int num; void show(){} } class Zi extends Fu{ //in ...

  9. 【学习笔记】TCP通信的细节及TCP连接对HTTP事务处理性能影响

    从三次握手的细节说起 刚开始尝试使用java等后端语言写IO流,或用套接字(socket)实现简单C/S通信的同学们,常常会接触到的一个概念:就是所谓的"三次握手",socket作 ...

  10. 蓄水池抽样（原理&实现）

    前言: 蓄水池抽样:从N个元素中随机的等概率的抽取k个元素,其中N无法确定. 适用场景: 模式识别等概率抽样,抽样查看渐增的log日志(无法先保存整个数据流然后再从中选取,而是期望有一种将数据流遍历一 ...