Question

我有一个jsp页面，它首先从数据库中获取下拉元素。我在选择元素时会触发javascript以允许从ajax页面检索值以进行第二次下拉。当我从第二个下拉列表中选择一个值时，我想触发另一个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

Answer 1

您可以参考this，希望这对您有帮助。

异步页面返回select的值后触发javascript

1 个答案: