博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Js实现select联动,option从数据库中读取
阅读量:4936 次
发布时间:2019-06-11

本文共 2049 字,大约阅读时间需要 6 分钟。

待要实现的功能:页面有两个select下拉列表,从第一个select中选择后,在第二个select中出现对应的列表选择,再从第二个select中选择后,在一个text中显示对应的信息。两个select和text的数据全部来自oracle数据库,该功能用js实现。

首先我们先定义两个select和text:

这个是第一个select,用来选择员工所在的部门,其中注意后面那个onChange方法。这个就是当你选择了一个选项后,调用函数selectChange(),这个函数是在js里用来实现联动第二个select的。

这个是第二个select用来选择员工,在onChange方法中的函数也是在js中自己定义的用来实现在text中显示相应信息的函数。

在数据库中有下表:

create table department(    dept_no   varchar2(4),    dept_name varchar2(20))create table empl_Info(    empl_no   varchar2(8),    empl_name varchar2(10),    dept_no    varchar2(4),    empl_text  varchar2(50))

简单定义了一个,第一张表是部门表,在第一个select中显示,第二个表是员工信息表,在第二个select中显示,然后在text中显示empl_text中的信息。

下面是js中的实现:

array = new Array();<%   int count = 0;   rs=stmt.executeQuery("select e.empl_no, e.empl_name, e.dept_no, e.empl_text from department d, empl_Info e where d.dept_no=e.dept_no order by e.dept_no desc");    String deptno = "";    String emplno = "";  String emplname = "";  String empltext = "";   while(rs.next()){        deptno = rs.getString("dept_no");        emplno = rs.getString("empl_no");        emplname = rs.getString("empl_name");        empltext = rs.getString("empl_text");%>       array[<%=count%>] = new Array("<%=emplno%>","<%=emplname%>","<%=deptno%>","<%=empltext%>");      <%count++;   }%>

这一步根据需要可以调整,为了举例方便,这是在页面加载时完成的,所以如果数据很多,加载速度有些慢。之后我们要取的数据就可以从array中读取了。

function init(){        document.getElementByIdx_x("department").length = 1;       <%       rs=stmt.executeQuery("select * from department order by dept_no desc");       String dno="";       String dname="";       while(rs.next()){       dno= rs.getString(1);    dname= rs.getString(2);%>       document.getElementByIdx_x("department").options[document.getElementByIdx_x("department").length] = new Option("<%=dno%> <%=dname%>");       document.getElementByIdx_x("department").options[document.getElementByIdx_x("department").length-1].value="<%=dno%>";<%}%>}function selectChange(id){        document.getElementByIdx_x("empl").length = 1;        for(var i = 0;i

 

转载于:https://www.cnblogs.com/zhujiabin/p/4995589.html

你可能感兴趣的文章
oracle常用小知识点
查看>>
CATransform3D参数的意义
查看>>
"外部组建发生错误"
查看>>
怎么自己在Objective-C中创建代理
查看>>
svn检出maven工程到eclipse里面,部署到tomcat的步骤
查看>>
Under Armour Drive 4 Performance Reviews
查看>>
C#操作目录和文件
查看>>
警惕数组的浅拷贝
查看>>
百度地图 导航
查看>>
SQLServer 错误: 15404,无法获取有关 Windows NT 组
查看>>
html5全局属性
查看>>
【转】Android Hook框架Xposed详解
查看>>
Android 有用代码片段总结
查看>>
英语各种时态例句
查看>>
从下往上看--新皮层资料的读后感 第三部分 70年前的逆向推演- 从NN到ANN
查看>>
(转)系统引导管理器GRUB详解
查看>>
[转帖]SAP MM Tolerance
查看>>
数据访问C#入门经典第21章-读写压缩数据
查看>>
IOS-CocoaPods的详细安装与使用
查看>>
读《世界是数字的》有感
查看>>