<!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. 1349: [Baltic2006]Squint

    1349: [Baltic2006]Squint Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 427  Solved: 248[Submit][Stat ...

  2. 从零开始学习Vue.js，学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  3. elastic search 学习 一

    初步阅读了elastic search 的文档,并使用command实践操作. 大概明白其概念模型.

  4. JSON的服务器开发之路

    JSON的服务器开发之路 不知道需要哪儿些包... /dcywpt/WebRoot/WEB-INF/lib/commons-collections-3.2.jar /dcywpt/WebRoot/WE ...

  5. 机器学习基石 2 Learning to Answer Yes/No

    机器学习基石 2 Learning to Answer Yes/No Perceptron Hypothesis Set 对于一个线性可分的二分类问题,我们可以采用感知器 (Perceptron)这种 ...

  6. HttpURLConnection实现两个服务端的对接

    在企业开发中,很多时候需要用到两个服务端的对接,在java类中进行连接并传递参数,其中的HttpURLConnection是一种轻量化,并且简单的方法! package httptest; impor ...

  7. HDFS入门（1）

    2015.07.12笔记 1.HDFS Distributed File System(操作系统实现人机交互,最重要的功能是文件管理,使用文件管理系统,windows.Linux文件管理系统有共性:用 ...

  8. 【Unity编程】Unity中关于四元数的API详解

    本文为博主原创文章,欢迎转载,请保留出处:http://blog.csdn.net/andrewfan Unity中关于四元数的API详解 Quaternion类 Quaternion(四元数)用于计 ...

  9. Windows Mobile 常用键值VK对应表

    #define VK_TSOFT2              VK_F2  // Softkey 2  #define VK_TTALK                VK_F3  // Talk  ...

  10. mybatis generator 插件安装及使用

    现在Mybatis特别火,但是在开发中却要经常写实体类和配置文件,会不会特别烦人,所以可以利用Mybatis的代码生成插件来生成这部分代码: 1,打开eclipse,点击Help>Softwar ...