2017-06-22 37 views
-2

我有一个jsp页面,它首先获取数据库下拉元素。我选择了一个JavaScript元素被触发,以允许从第二个下拉列表中检索ajax页面的值。我想从第二个下拉列表中选择一个值时触发另一个JavaScript。任何协助或想法如何做到这一点将不胜感激。在异步页面返回select后的javascript触发器

jsp页面:

<div id="invTruck" class="invTruck"> 
     <table id="tbl_invTruck" width="100%" border="0"> 
     <tbody> 
      <tr> 
       <td width="15%" style="display:none;"><center>Work Order Id</center></td> 
       <td width="17%"><center>Truck Type</center></td> 
       <td width="17%"><center>Licences Plate #</center></td> 
       <td width="17%"><center>Driver ID</center></td> 
       <td width="17%"><center>Max Haulage Weight</center></td> 
       <td width="17%"><center>Job Number</center></td> 
      </tr> 

      <tr> 
       <td style="display:none;"><input name="wInv_work_Id" type="text"></td> 
       <td><select id="invTru_Type" name="invTru_Type" onchange="getTruckPlates(this.value, this.id)"> 
        <option disabled selected hidden value="">Select A Truck Type</option> 
        <%while(rsinvTru1.next()){%> 
        <option><%=rsinvTru1.getString(1)%></option> 
        <%}%> 
        </select> 
       </td> 
       <td><select id="invTru_LicensePlateNo" name="invTru_LicensePlateNo"> 
        <option selected hidden value="">Select A Truck</option> 

        </select></td> 
       <td><input id="driver_emp_Id" name="driver_emp_Id" readonly="true" value="" type="text"></td> 
       <td><input id="invTru_MaxHw" name="invTru_MaxHw" type="text"></td> 
       <td><input name="" type="text"></td> 
      </tr> 
      </tbody> 
     </table> 
     <table width="100%" height="50%" border="0"> 
      <tr> 
       <td width="50%"><input class="buttonCreateInv" id="btn_AddTruck" type="button" value="Add A Truck"></td> 
       <td width="50%"><input class="buttonCreateInv" name="btn_RemoveTruck" type="button" value="Remove A Truck"></td> 
      </tr> 
     </table> 
     </div> 

AJAX页面:

<%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" errorPage="" %> 

<jsp:useBean id ="invTru2" class = "beans.InventoryTruck" scope = "page"/> 
<jsp:setProperty name ="invTru2" property="*"/> 
<%String invTru_Type = request.getParameter("invTru_Type"); 

ResultSet rsinvTru2 = null;%> 
<%rsinvTru2 = invTru2.search("select invTru_Id, invTru_LicensePlateNo from tbl_InventoryTruck where invTru_Type = '" + invTru_Type + "' ");%> 


<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<!----><script language="JavaScript" src="../js/getDriverId.js"></script> 
</head> 

<body> 
<select id="invTru_LicensePlateNo" name="invTru_LicensePlateNo" > 
<option selected hidden value="">Select A Truck</option> 
<%while(rsinvTru2.next()){%> 
<option onChange="showDriverEmpId(this.value)" value="<%=rsinvTru2.getString(1)%>" ><%=rsinvTru2.getString(2)%></option> 
<%}%> 
</select> 

</body> 
</html> 

js函数

var xmlHttp; 
    var strTru; 
    function getTruckPlates(str, str1) 
{ 

    strTru = str1; 
// alert(strTru); 
    if (typeof XMLHttpRequest != "undefined") 
    { 
    xmlHttp= new XMLHttpRequest(); 
    } 
    else if(window.ActiveXObject) 
{ 
    xmlHttp= new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    if (xmlHttp==null) 
{ 
    alert("Browser does not support XMLHTTP Request") 
    return; 
    } 

    var url="WorkOrder_ajaxAsynchronousTruckPlate.jsp"; 
    url +="?invTru_Type="+str; 
    xmlHttp.onreadystatechange = stateChange; 
    xmlHttp.open("GET", url, true); 
    xmlHttp.send(null); 
    } 

    function stateChange() 
    { 
    var str3 = "invTru_LicensePlateNo"; 
    var n = strTru.length; 
    var str2 = strTru.charAt(n- 1); 
    if(str2 >= 1) 
    { 
    var str4 = str3.concat(str2); 
    //alert(str4); 
    } 
    else 
    { 
    str4 = str3; 
    //alert(str4+"This is only for less than 1"); 
    }  


    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
    document.getElementById(str4).innerHTML=xmlHttp.responseText 
      alert("Please entere data for Job No"); 
    //; 
    //var sTruPlate = xmlHttp.open("GET", '../jsp/WorkOrder_Insert.jsp?'+ str4, true); 
    //alert(sTruPlate); 

    } 
}// JavaScript Document 
+0

请指出您的代码是否存在问题,并且请粘贴部分代码。 – Riyaz

+0

从第一个下拉菜单应用相同的技术到第二个下拉菜单... –

+0

我试过了,但是当我应用它时,第二个下拉菜单中的第二个下拉菜单不再填充。 –

回答

0

你可以参考this,希望这会帮助你。