<!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. kali linux qq 2013

    按照网上的教程折腾了好几个小时,都没有搞定的qq for linux 在意外的尝试中成功了 文章有参考网友教程的部分:http://xiao106347.blog.163.com/blog/stati ...

  2. @Required 注释应用于 bean 属性的 setter 方法，它表明受影响的 bean 属性在配置时必须放在 XML 配置文件中，否则容器就会抛出一个 BeanInitializationException 异常。

    @Required 注释应用于 bean 属性的 setter 方法,它表明受影响的 bean 属性在配置时必须放在 XML 配置文件中,否则容器就会抛出一个 BeanInitializationEx ...

  3. mybatis基础学习1---(配置文件和sql语句)

    1:配置文件(主要配置文件) 2:配置文件(引入) 3:sql语句解析: <mapper namespace="/"> <!-- 1 -->根据id查对象 ...

  4. Https握手协议以及证书认证

    1. 什么是https Https = http + 加密 + 认证 https是对http的安全强化,在http的基础上引入了加密和认证过程.通过加密和认证构建一条安全的传输通道.所以https可以 ...

  5. 利用Register protocol实现网页调用桌面程序(类似迅雷、QQ等)

    前言 我们经常看到 tencent://.. thunder://     这两种开头的网址,往往觉得很奇怪,很想弄懂其中的原理,是如何实现的,我查找了相关的 资料,终于找到了,跟大家分享下. 原理篇 ...

  6. HTML——超文本标记语言（表单及12个表单元素）

    表单 格式: <form action=" " method="get/post"  placehoder=" "></f ...

  7. java 文件操作（二）---Files和Path

    自从java 7以来,引入了FIles类和Path接口.他们两封装了用户对文件的所有可能的操作,相比于java 1的File类来说,使用起来方便很多.但是其实一些本质的操作还是很类似的.主要需要知道的 ...

  8. netsh导入导出IPSec配置策略

    首先提一句: ipsec规则中,filter action为允许的比拒绝的优先级要高,其它的没有顺序关系,经测试验证! 参考:http://tech.techweb.com.cn/thread-354 ...

  9. django出现__init__() got an unexpected keyword argument 'mimetype‘ 问题解决

    这种问题好多新手按照djangobook学习的时候应该都遇到过,是因为这是老的django的写法,新的django已经升级改变了很多东西. 处理方法如下: I think you are not us ...

  10. flex盒子里面元素linehight对高度的影响

    那天,高高兴兴的测试flex属性.大家都知道,当父盒子display:flex的时候,子盒子即使宽高和大于父盒子,也会由于flex的特性进行收缩:然而,在给父盒子加了flex-direction:co ...