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

【问题标题】：populating a div from another select box which is populated using ajax从另一个使用 ajax 填充的选择框填充 div
【发布时间】：2014-12-10 20:44:08
【问题描述】：

我正在制作一个有两个选择框的网页，其中一个要使用ajax 填充。我可以使用ajax 的选择框一的值填充选择框二。但我无法使用第二个当前值填充 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>

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

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 事件。请指导我完成这个。谢谢。

【问题讨论】：

您是否尝试在填充第二个列表后立即注册 onchange？ document.getElementById('selModel').onChange = loadXMLDoc1;不确定这是否是问题所在，但值得一试。

标签： javascript ajax jsp

【解决方案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() 方法，使用它们可以在动态嵌入的元素上触发事件。

【讨论】：