Question

我正在创建一个网页，其中有两个选择框，其中一个框将使用ajax填充。我可以使用ajax选择框1的值来填充选择框2。但是我无法使用当前的第二个值来填充div。

这是我到目前为止所做的。

<tr>
        <td>Product</td>
        <td><select name="selProduct" id="selProduct"  onchange='loadXMLDoc();' >
            <option value="-1"> Select Product</option>
            <option value="0"> JSA Three Wheelers</option>
            <option value="1"> Rotavators</option>
            <option value="2"> ACE Tractors</option>
            <option value="3"> BCS Reaper Binder</option>
            <option value="4"> Lubi Pumps</option>
            <option value="5"> New Golden Punjab Thresers</option>

          </select>
        </td>
        </tr>
        <tr>
        <td>Model</td>
        <td>
            <div id="myDiv">
            <select name="selModel" id="selModel" onchange='loadXMLDoc1();'> 

            <option  value="-1">select Model</option>
            </select>
            </div>



        </td>
        </tr>
        <tr>
        <td>
         <div id="divRate">

         </div>
        </td></tr>

我可以使用函数selModel填充loadXMLDoc()选择框。现在我想使用函数selModel来获取从loadXMLDoc1()中选择的模型的价格。这是功能。

function loadXMLDoc()
 {
  function byId(e) {return document.getElementById(e);}
  var sel=byId('selProduct');
  var xmlhttp;
  if (window.XMLHttpRequest)
  { 
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
 else
  {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","NewFile.jsp?str="+sel.value,true);
 xmlhttp.send();

}

function loadXMLDoc1()
{
 function byId(e) {return document.getElementById(e);}
 var selModel=byId('selModel');
 var selProduct=byId('selProduct');

 var xmlhttp;
 if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
 else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("divRate").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","selPrice.jsp?selProduct="+selProduct.value+"selModel="+selModel.value,true);
xmlhttp.send();

}

文件selPrice.jsp为

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org /TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<% String selModel= request.getParameter("selModel");
String selProduct= request.getParameter("selProduct");
int valProduct= Integer.parseInt(selProduct);
int valModel= Integer.parseInt(selModel);
%>

<%if(valProduct ==0 && valModel==1 ){ %>
 <input type="text" value="173000" readonly="readonly">
<%} 
else if(valProduct ==0 && valModel==2 ){ %>
<input type="text" readonly="readonly" value="183000">
<%}
else if (valProduct==1 && valModel==1){%>
<input type="text" readonly="readonly" value="400000" >


<%} 
else if (valProduct==1 && valModel==2){%>
<input type="text" readonly="readonly" value="450000">

<%} %>


</body>
</html>

在使用ajax填充列表后，我无法获得第二个选择框的loadXMLDoc1()函数触发onchange事件。请指导我完成这个。感谢。

Answer 1

此代码似乎正在运作......

示例javascript

function loadXMLDoc() {   
document.getElementById("selModel").innerHTML = '<option value="A">A</option value="B">B<option value="C">C</option><option value="D">D</option>';
}

function loadXMLDoc1() {
    document.getElementById("divRate").innerHTML = document.getElementById("selModel").value;
}

http://jsfiddle.net/qL36s37a/

如果这样做不能更好，你可以使用jQuery并使用.live（）或.on（）方法，使用它们可以在动态嵌入的元素上触发事件。

从另一个使用ajax填充的选择框填充div

1 个答案: