在異步頁面返回select後的javascript觸發器

-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

來源

2017-06-22 Donnamarie Deowan

請指出您的代碼是否存在問題，並且請粘貼部分代碼。 – Riyaz

從第一個下拉菜單應用相同的技術到第二個下拉菜單... –

我試過了，但是當我應用它時，第二個下拉菜單中的第二個下拉菜單不再填充。 –

你可以參考this，希望這會幫助你。

來源

2017-06-22 11:58:10

在異步頁面返回select後的javascript觸發器

回答

相關問題