JS Implementation Select linkage, option to read from the database

Features to be implemented: the page has two select drop-down lists, selected from the first select, the corresponding list selection appears in the second select, and then, after selecting from the second select, displays the corresponding information in a text. Two select and text data are all from the Oracle database, this function is implemented with JS.

Let's first define two select and text:

<select id= "Department " style="width:80px " onchange="selectchange (this.value)"> <option value=">-Please select-</ option></Select>

This is the first select to select the department where the employee is located, paying attention to the latter onchange method. This is when you choose an option, call the function Selectchange (), this function is used in JS to implement linkage of the second select.

<select id="empl" style="width:100px " onchange= " showname (this.value) ">    <option value=" >-Please select-</option></Select>

This is the second select to choose an employee, the function in the OnChange method is also the function that is defined in JS to implement the corresponding information in text.

<input type="text" name="emplinfo" value= " This shows the employee information " size=" "maxlength= " >

The following table is available in the database:

CREATE TABLE Department (    dept_no   varchar2 (4),    dept_name varchar2 (20  ) CREATE TABLE Empl_info (    empl_no   varchar2 (8),    empl_name varchar2 (  ,    dept_no    varchar2 (4),    empl_text  varchar2 (  ))

A simple definition of the first table is the department table, shown in the first select, the second table is the Employee Information table, displayed in the second select, and the information in the Empl_text is displayed in text.

The following is the implementation of JS:

Array =NewArray ();<%intCount =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 B Y 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%>] =NewArray ("<%=emplno%>","<%=emplname%>","<%=deptno%>","<%=empltext%>"); <%count++; }%>

This step can be adjusted as needed, for example, this is done at page loading, so if there is a lot of data, loading speed is slow. The data we are going to fetch can then be read from the 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] =NewOption ("<%=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(vari =0; i<array.length;i++){        if(array[i][2] ==ID) {document.getelementbyidx_x ("Empl"). options[document.getelementbyidx_x ("Empl"). length] =NewOption (array[i][0]+" "+array[i][1]); Document.getelementbyidx_x ("Empl"). options[document.getelementbyidx_x ("Empl"). length-1].value=array[i][0]; }}}function ShowName (id) {document.getelementbyidx_x ("Emplinfo"). Value = array[id-1][1];}

JS Implementation Select linkage, option to read from the database